本文共 5280 字，大约阅读时间需要 17 分钟。
一、概念
1.Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能
datatables默认情况已启用一些功能，搜索、 排序、 分页等功能已经开启2.怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table。
$(document).ready(function(){ $('#myTable').DataTable(); }); 3.开始使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。
4.安装：在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件| Column 1 | Column 2 |
|---|---|
| Row 1 Data 1 | Row 1 Data 2 |
| Row 2 Data 1 | Row 2 Data 2 |
5.DataTables布局（dom定位）
datatables默认会打开部分特性，比如搜索框，分页显示等。如果不喜欢默认的布局，则使用DOM选项就可以灵活配置各个特性的设置datatables定义了10个字符表示不同的组件
•l - Length changing 每页显示多少条数据选项 •f - Filtering input 搜索框 •t - The Table 表格 •i - Information 表格信息 •p - Pagination 分页按钮 •r - pRocessing 加载等待显示信息 •< and > - div elements 一个div元素 •<"#id" and > - div with an id 指定id的div元素 •<"class" and > - div with a class 指定样式名的div元素 •<"#id.class" and > - div with an id and class 指定id和样式的div元素6.垂直滚动条
如果在一个固定高度的容器里放table，这个时候可能需要用到垂直滚动条，才能展示所有数据。
开启垂直滚动条很简单，只要设置scrollY和scrollCollapse选项即可jQuery-UI风格的垂直滚动条
加以下代码，可以滚动查看信息并且显示UI风格：
先引入jQueryUI的样式：$(document).ready(function() { $('#example').dataTable( { "scrollY": 200,//scrollY=100显示三行数据，=200显示六行数据，此处可随意设置 "scrollCollapse": true, "jQueryUI": true } ); } ); 一般设置滚动后就不用加pagination分页按钮了 7.水平滚动条 开启水平滚动条，设置scrollX选项
在这个例子中还加入css样式 th, td { white-space: nowrap; } ，使文字内容在一行里"scrollX": true,//开启水平滚动条
结合style样式，更明显 8.不同的分页样式 默认情况下Datatables的分页就是上一页、下一页和6个页数按钮，这适合大部分情况。 Datatables提供了四个模式供选择，通过设置 pagingType选项来配置 •simple - 只有上一页、下一页两个按钮"pagingType": "simple" •simple_numbers - 除了上一页、下一页两个按钮还有页数按钮，Datatables默认是这个"pagingType": "simple_numbers" •full - 有四个按钮首页、上一页、下一页、末页"pagingType": "full" •full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮"pagingType": "full_numbers"下面例子full_number的例子
$(document).ready(function() { $('#example').dataTable( { "pagingType": "full_numbers" } );} ); 9.保存状态 Datatables设置 stateSave选项后，可以保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。 这个状态的保存用了html5的本地储存和session储存，这样更加有效率。如果你的数据是异步获取的，你可以使用 stateSaveCallback和 stateLoadCallback选项. 需要注意的是，这个特性不支持ie6、ie7 默认情况下，这个状态会保存2小时，如果你希望设置的时间更长，通过设置参数 stateDuration来初始化表格 这个参数值也可以控制是本地储存(0~更大)还是session储存(-1) 下面的例子展示了Datatables设置 stateSave选项初始化后，实现的状态保存 $(document).ready(function() { $('#example').dataTable( { "stateSave":true//当页面刷新的时候，会恢复上次的状态 } );} ); 10.开启/关闭datatables的某些功能 如果不想要datatables的某些功能，可以禁用它 $(document).ready(function() { $('#example').dataTable( { "paging": false,//取消分页功能 "ordering": false,//取消升序降序排列功能 "info": false//取消显示行数信息的功能Showing 1 to 10 of 57 entries } );} ); 11.复杂表头（rowspan和colspan） 制定复杂的表头(合并列/合并行) 在使用表格的时候总会遇到要分组列的情况，datatables完全支持合并列/合并行
12.一个页面初始化多个表格 datatables可以初始化多个表格，只需要使用jquery的选择器即可 这些表都是独立（即用户控制一个表上分页不会影响其他表格），但它们共享给定的初始化参数 （例如如果你指定的国际化文件，所有的表将显示你指定的语言)。 此外，API 可以一起操作或者独立操作。某几个独立的表，将table的class设置为相同
$(document).ready(function() { $('table.display').dataTable();} ); 13.多列排序 datatables允许同时指定多个列排序，有很多不同的方法来实现：
•用户按住shift，鼠标分别点击第一列，第二列等等，可以实现多列同时排序 •给每列加上columns.orderData选项,即如果指定列排序时，第一列有相同数据，则按照第二列排序 •使用columns.orderData选项给多列排序，比如[ [0,'asc'], [1,'asc'] ] •使用order()方法实现多列排序注意，可以使用orderMulti 选项来禁用用户按住shift点击多列排序
$(document).ready(function() { $('#example').dataTable( { columnDefs: [ { targets: [ 0 ], orderData: [ 0, 1 ] //如果第一列进行排序，有相同数据则按照第二列顺序排列 }, { targets: [ 1 ], orderData: [ 1, 0 ] //如果第二列进行排序，有相同数据则按照第一列顺序排列 }, { targets: [ 4 ], orderData: [ 4, 0 ] //如果第五列进行排序，有相同数据则按照第一列顺序排列 } ] } );} ); 14.表格宽度自适应 让表格跟着页面大小的变化而变化，表格随着页面的大小变化自动适应 用法：<table>属性中，必须设置width=100%,<table id="example" class="display" cellspacing="0" width="100%">
然后JS代码：$(document).ready(function() { $('#example').dataTable();} ); 15.数字格式化（国际化）==========================================================================好像是不管用，没什么效果 通过language.decimal选项可以配置数字的友好显示，比如1200450，显示为12.004,50 $(document).ready(function() { $('#example').dataTable( { "language": { "decimal":",", "thousands":"." } } );} ); 16.语言国际化 可以使用language选项来国际化Datatables的相关信息 $(document).ready(function() { $('#example').dataTable( { "language": { "lengthMenu": "每页 _MENU_ 条记录", "zeroRecords": "没有找到记录", "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )", "infoEmpty": "无记录", "infoFiltered": "(从 _MAX_ 条记录过滤)" } } ); } ); 17.设置隐藏列 不希望显示在屏幕上，或者需要什么条件才会显示，使用columns.visible选项来实现 被隐藏的列依然是表格的一部分，通过column().visible()方法来显示 被隐藏的列既然是表格的一部分，那么也可以搜索和访问被隐藏的列的相关内容 $(document).ready(function() { $('#example').DataTable( { "columnDefs": [ { "targets": [ 2 ],//目标定位到第三列 "visible": false,//设置不可见 "searchable": false//不能被搜索到 }, { "targets": [ 3 ],//目标定位到第四列 "visible": false//设置不可见 } ] } );} ); 18.默认排序 在datatables初始化时可以使用order选项指定列怎么排序，order可以接受多个二维数组数据， 数组第一个位置为第几列，第二个位置为标示asc升序或desc降序 $(document).ready(function() { $('#example').dataTable( { //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序 "order": [[ 3, "desc" ]] } ); } ); 转载地址：http://ajdfi.baihongyu.com/