Datatables是一款强大的jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
主要特点：
自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的
DataTables的使用很简单，只需要引入两个文件，一个css样式文件和DataTables本身的脚本文件。
1. <!--引入css-->
2. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
3.
4. <!--引入JavaScript-->
5. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
6. <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
7.
8. <!--初始化代码-->
9. <script>
10. $(document).ready(function() {
11. $('#example').DataTable(); //"#example"是表格的id
12. });
13. </script>datatables默认的布局也可以通过dom选项来修改；
datatables定义了10个字符表示不同的组件，除了t以外，其他选项可以指定多次，
* 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元素
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">' //表格信息在表格上方，其他的都在表格底部，top，bottom是添加的类名
} );
} );2.为Datatables绑定数据（‘点击行获取数据’）
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );3.列渲染（render）
把某一列隐藏，通过columns.render方法把该列的值拼接到另一列
$('#example').dataTable({ //将第四列的值拼接到第一列，并隐藏第四列
"columnDefs": [{
"render": function(data, type, row) {
return data + ' (' + row[3] + ')';
},
"targets": 0
},
{
"visible": false,
"targets": [3]
}]
});4.创建行回调（createdRow）
当某栏的值满足某种条件时，触发某种效果
//当工资大于4000的时候用高亮显示，注意columns.createdCell选项也可以实现同样的效果
$(document).ready(function() {
$('#example').dataTable( {
"createdRow": function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
$('td', row).eq(5).css('font-weight',"bold").css("color","red");
}
}
} );
} );5.使用dom选项添加自定义元素
熟练使用dom，可以把给Datatables添加自定义按钮或者其他工具，使其看起来是一个整体
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"toolbar">frtip' //toolbar是添加自定义元素的类名，fltip为datatables显示出来的组件
} );
$("div.toolbar").html('<b style="color:red">自定义文字、图片等等</b>'); //向添加的自定义元素里添加内容
} );6.更改页面显示条数的下拉框选项（lengthMenu）
此选项能够指定显示分页长度select元素的下拉选项，它可以是一维数组，也可以是二维数组，默认值为 [ 10, 25, 50, 100 ]
-
整数值的一维数组，用于显示的选项和显示长度的值
-
二维数组，第一个数组用来作为长度的值，第二个数组用来作为显示的选项。这是很有用的，比如当你想显示“所有”选项
$('#example').dataTable({
"lengthMenu": [[2, 4, 6, -1], [2, 4, 6, "All"]]
});一段小代码。包含零零散散的小功能，
$(function(){
var table = $('#example').DataTable({
"columnDefs":[{
"render":function(data,type,row){ //列渲染，把第0列拼接到第4列
return data+'('+row[3]+')';
},
"targets":0
},
{
"visible":false, //隐藏第4列
"targets":[3]
}],
"createdRow":function(row,data,index){ //行创建回调，如果第6列的薪资大于4000，字体变红
if(data[5].replace(/[\$,]/g,'')*1>4000){
$('td',row).eq(4).css('color','red');
}
},
"dom":'<"toolbar">ltip', //添加自定义元素，toolbar为添加元素的类名，ltip是要显示出来的datatables的组件
// "lengthMenu":[[2,4,6,-1],[2,4,6,'所有']], //自定义每页显示长度
"drawCallback":function(setting){
var api = this.api();
var rows = api.rows({
page:'current'
}).nodes(); //获取当前页面的多行节点
var last = null;
api.column(2,{ //新增一个类名为group的元素，内容为第3列的内容，并显示到当前行的前面
page:'current'
}).data().each(function(group,i){
if(last !== group){
$(rows).eq(i).before('<tr class="group"><td colspan="5">'+group+'</td></tr>');
last = group;
}
})
}
});
$('div.toolbar').html('<p style="color:red">hiahia~</p>'); //给自定义添加的元素添加内容
$('#example').on('click','tr.group',function(){ // 新增的元素添加点击事件
var currentOrder = table.order()[0]; //获取DataTables的排序和控制。以二维数组的格式储存排序信息
//第1个参数为排序列的索引值，第2个参数为排序的方式
if(currentOrder[0]==2&¤tOrder[1]=='asc'){
table.order([2,'desc']).draw(); //order只设置表的排序，并不执行，draw（）方法执行效果
}else{
table.order([2,'asc']).draw();
}
})
})