DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)


Posted in Javascript onNovember 09, 2016

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

主要功能

分页,即时搜索和排序

几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理

支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

各式各样的扩展: Editor, TableTools, FixedColumns ……

丰富多样的option和强大的API

支持国际化

超过2900+个单元测试

免费开源 ( MIT license )! 商业支持

更多特性请到官网查看

这里主要讲一下DataTable使用Ajax来获取数据并且动态加载dom的方法。这样也方便了数据管理,也避免了HTML页面中大量的tr,看起来很凌乱。

显示效果

DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)

源文件

首先需要引入dataTables的源文件:

CSS:http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css

JS: http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js

使用

HTML

只需要定义一个table,给一个唯一的标志(id或者唯一的class);

<table class="table table-bordered table-striped" id="dailyTable"></table>

JS

在页面元素渲染完成之后,获取table,使用dataTables对其操作。

ajax是数据的url,这里用的本地数据,使用的是相对路径。当然,也可以使用HTTP请求

columns是一个数组,定义的是表格的标题,数组有多少个界面就会显示多少。格式必须是{title:“xxx”}

$(document).ready(function($) {
$('#dailyTable').DataTable({
ajax: "../json/tableData.json",
columns: [{
title: "Rendering engine"
}, {
title: "Browser"
}, {
title: "Platform(s)"
}, {
title: "Engine version"
}, {
title: "CSS grade"
}]
});
});

JSON

这里数据太多,只说明一下格式。

json数据格式为二维数组,其数据需要被包裹在"data"字段下面。每个二维数组的数据按照js中的title顺序依次排列。

{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
]
]
}

以上所述是小编给大家介绍的DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 #Javascript
jQuery之动画效果大全
Nov 09 #Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 #Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 #Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 #Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 #Javascript
H5移动端图片压缩上传开发流程
Nov 09 #Javascript
You might like
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
python抓取网页内容示例分享
2014/02/24 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python global全局变量函数详解
2018/09/18 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
python opencv实现图像配准与比较
2021/02/09 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
自我评价如何写好?
2014/01/05 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
生活小常识广播稿
2014/09/16 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js