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

强函数

分页、即时搜索和排序

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

支持不同的主题数据表，jQuery用户界面，引导，基础

各种扩展：编辑器，桌面工具，固定栏.

丰富的选项和强大的应用编程接口

支持国际化

超过2900个单元测试

免费开源(麻省理工学院许可)！业务支持

更多功能，请访问官方网站

本文主要讲述了利用Ajax实现数据表获取数据和动态加载dom的方法。这也方便了数据管理，避免了HTML页面中大量的TRs，让它们看起来很乱。

显示效果

源文件

首先，您需要导入数据表的源文件：

CSS :http://cdn . datatables . net/1 . 10 . 12/CSS/jquery . datatables . min . CSS

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

使用

超文本标记语言

只需定义一个表，并给出唯一的标志(id或唯一的类)；

table class=' table table-加边框的表-分条的' id='dailyTable'/tableJS

呈现页面元素后，获取表格并使用数据表对其进行操作。

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

Columns是一个数组，它定义了表的标题，并显示数组中所有的接口。格式必须是{{title:"xxx"} "}

$(文档)。ready(函数($) {$('#dailyTable '))。DataTable({ajax: './json/tableData.json '，column :[{ title : ' Rendering Engine ' }，{title: 'Browser'}，{ title : ' Platform ' }，{title: 'Engine version'}，{ title : ' CSS grade ' } } })；});JSON

这里数据太多，解释一下格式就可以了。

Json数据格式是二维数组，其数据需要包装在' data '字段下。每个2D数组的数据在js中按照标题的顺序排列。

{'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，这是边肖引入的。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！