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 new关键字的玄机 以及其它
Aug 25 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 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
Terran兵种介绍
2020/03/14 星际争霸
PHP新手上路(三)
2006/10/09 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中的闭包详细介绍和实例
2014/11/21 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python字典操作实例详解
2017/11/16 Python
python监控文件并且发送告警邮件
2018/06/21 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
Shell脚本如何向终端输出信息
2014/04/25 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
客服工作职责
2013/12/11 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
高效课堂标语
2014/06/26 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
教师读书笔记
2015/06/29 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
如何在C++中调用Python
2021/05/21 Python
python脚本框架webpy模板赋值实现
2021/11/20 Python
Python制作表白爱心合集
2022/01/22 Python