本文3个部分
一:什么是DataTables
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
分页,即时搜索和排序
几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 ( MIT license )! 商业支持
Bootstrap整合DataTables
Bootstrap原生Table:
DataTables表格:
显而易见的是,添加了搜索功能,分页、翻页功能,显示记录数,包括按指定属性排序,内部还支持延迟加载功能。
二:如何使用DataTables
①创建一个Table,自定义一个ID
②发送ajax请求,向Table tbody中添加数据
③重新加载DataTables
$('#dataTables-example').DataTable();
④因为本人将DataTables放到了一个Bootstrap标签页里,因此这里设置了一个Boolean变量,用来确定是否已经发送请求,如果已发送,下次切换时不再发送ajax请求,以免卡顿,当需要加载时,将此变量设置为Fasle即可。
这里注意,选取一个不变的父类使用on函数动态绑定,如果使用onclick,会导致新添加的控件点击无效。
之后将每一列的值设置到modal中,可以实现点击修改
三:注意事项
1.如果想修改DataTables的默认值,可以到DataTables的js文件里修改。
2.将ajax请求返回的属性数量与行数对应,否则会报错。
3.如果遇到问题,或者想掌握更多,请到DataTables官网学习研究。
DataTable官网:https://www.datatables.net/
DataTables中文网:http://datatables.club/