Datatables--一款jQuery表格插件

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

主要特点：

    自动分页处理

   即时表格数据过滤

    数据排序以及数据类型自动检测

    自动处理列宽度

    可通过CSS定制样式

    支持隐藏列

    易用

    可扩展性和灵活性

    国际化

    动态创建表格

    免费的 

DataTables的使用很简单，只需要引入两个文件，一个css样式文件和DataTables本身的脚本文件。

1. 
2. 
3.  
4. 
5. 
6. 
7.  
8. 
9. 

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('自定义文字、图片等等');    //向添加的自定义元素里添加内容
} );

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(''+group+'');
                        last = group;
                    }
                })
            }
        });
        $('div.toolbar').html('
hiahia~
');       //给自定义添加的元素添加内容
        $('#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();
            }
        })
    })