jquery.dataTable用法

DataTables是一个基于jquery的表格插件，有强大的分页，排序，动态修改表格等功能。它的所有配置和方法都能在其官网https://www.datatables.net上找到，这里挑选一些常用的功能讲解。

1.初始化配置

笔者约一年前在用datatable的时候，官方文档上的构造器还是dataTable()，现在则全部变成了DataTable()。需要注意两者的细微差别，使用dataTable()配置时所有属性需要加上引号，使用DataTable()则可加可不加。比如初始化时禁用分页和搜索功能，需要这么写：

var table=$('#table').dataTable({
    "paging":false,
    "searching":false
});
//or
var table=$('#table').DataTable({
    paging:false,
    searching:false
});
//or
var table=$('#table').DataTable({
    "paging":false,
    "searching":false
});

两者的区别是，$(selector).dataTable()返回的是一个jQuery对象，而$(selector).DataTable()返回的是这个对象的api实例，即DataTable()等价于dataTable().api(),有了这个api实例，我们就可以使用jquery.dataTable自带的方法了。

2.ajax请求数据

在知道ajax.reload()方法之前，笔者都是clear()方法删除全部列，再用addRow()方法一行行添加，比较麻烦。官网上特地给出了一个ajax专题讲解dataTable用ajax获取数据。在我看来，注意以下基本够用了：一个是服务端返回的数据必须按照{data:[[],[],[]]}的格式，即一个键为data，值为二维数组的对象，这个二维数组的行数即为表格的行数，列数必须与表格的列数相等；还有一个如果要对返回的数据经过处理再显示到表格中（比如状态值为0则某一列显示成红色，为1则绿色）则需要用fnCreatedRow(nRow,aData,iDataIndex)进行配置。其中,aData为一个数组，表示某一行的数据，iDataIndex为某一个数据在该aData数组中的下标，$(nRow)可以选中这一行。下面举个例子：

 // 每秒请求一次数据，如果返回第6列数据为1，则该行第8列显示“完成”；如果为1，则删除该行
 var  table=$('#staff_table').DataTable( {
            "ajax": {
                "url":'http://'+ipaddr+'/return_data',
                "type": "GET"
            },
            "fnCreatedRow": function (nRow, aData, iDataIndex) {
                if (aData[5] == "1") {
                    $('td:eq(8)', nRow).html('<a style="color:darkgreen;">完成</a>');
                }
                if (aData[5] == "0") {
                    table.rows($(nRow)).remove();
                 }             
            }
   } );
requestData();
function requestData(){
    table.ajax.reload(null,false);//no callback,no re-set or re-filter
    setTimeout(requestData,1000);
}

3.api

• table.order([0,'desc'],[2,'asc'])
  排序。支持多重排序。
• table.addRow()
  添加一行，传入参数为一个数组。
• table.rows($(selector)).remove()
  删除选中的某行或多行，配合addRow()，可以让表格呈现滚动显示动态数据的效果。
• table.clear()
  清除所有表格数据。
• table.draw()
  draw()方法可以重新渲染表格，一般来说使用了order(),addRow()方法后要draw()一些来让结果显示在浏览器上，不过要慎用。笔者曾在fnCreatedRow中用到draw()方法，当请求数据有几百行时，浏览器要好几秒才能渲染好表格。