DataTables插件介绍及使用方法

官方网站：http://www.datatables.net/

简介：DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。

主要特点：

• 自动分页处理

• 即时表格数据过滤

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

• 自动处理列宽度

• 可通过CSS定制样式

• 支持隐藏列

• 易用

• 可扩展性和灵活性

• 国际化

• 动态创建表格

• 免费的 

参数初始化：

bAutoWidth 

是否启用自动适应列宽

默认值：True

示例代码： 

$(document).ready(function(){
  $('#example').dataTable({
    "bAutoWidth": false
  });
});

 bDeferRender 

 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。

 默认值：False

示例代码：

$(document).ready(function(){
  var oTable = $('#example').dataTable({
    "sAjaxSource":"sources/arrays.txt",
    "bDeferRender":true
  });
});

bFilter 

是否启用内置搜索功能：可以跨列搜索。

默认值：True 

示例代码：

 $(document).ready(function(){
  $('#example').dataTable({
    "bFilter":false
  });
});

bInfo  

 是否显示表格相关信息：例如翻页信息等。

默认值：True 

示例代码： 

$(document).ready(function(){
  $('#example').dataTable({
    "bInfo":false
  });
});

bJQueryUI

是否启用  jQuery UI 皮肤插件支持

默认值:False

示例代码： 

$(document).ready(function(){
  $('#example').dataTable({
    "bJQueryUI":true
  });
});

 bLengthChange

是否允许用户，在下拉列表自定义选择分页大小(10, 25, 50 and 100),需要分页支持

默认值：True

示例代码： 

 $(document).ready(function(){
  $('#example').dataTable({
    "bLengthChange": false
  });
});

bPaginate 

是否开启分页

默认值：Ture

示例代码:

 $(document).ready(function (){ 
  $('#example').dataTable({
    "bPaginate":false
  });
});

bProcessing 

 是否启用进度显示，进度条等等，对处理大量数据很有用处。

默认值：false

示例代码： 

$(document).ready(function(){
  $('#example').dataTable({
    "bProcessing":true
  });
});

bScrollInfinite  

是否开启内置滚动条，并且显示所有数据

默认值：fasle 

 示例代码： 

$(document).ready(function(){
  $('#example').dataTable({
    "bScrollInfinite":true,
    "bScrollCollapse":true,
    "sScrollY": "200px"
  });
});

 bServerSide

是否启用服务器处理数据源，必须sAjaxSource指明数据源位置

默认值：False

示例代码：

$(document).ready(function(){
  $('#example').dataTable({
    "bServerSide":true,
    "sAjaxSource":"xhr.php"
  });
});

 bSort 

是否开启列排序功能，如果想禁用某一列排序，可以在每列设置使用bSortable参数

 默认值：True

示例代码： 

$(document).ready(function(){
  $('#example').dataTable({
    "bSort":false
  });
});

bSortClasses  

 开关，指定当当前列在排序时，是否增加classes ‘sorting_1′, ‘sorting_2′ and ‘sorting_3’，打开后，在处理大数据时，性能有所损失

 默认值：False

示例代码：

$(document).ready(function(){
  $('#example').dataTable({
    "bSortClasses":false
  });
});

bStateSave  

 是否开启COOKIEs保存当前状态信息

 默认值：false

 示例代码：

$(document).ready(function(){
  $('#example').dataTable({
    "bStateSave": true
  });
});

sScrollX 

是否开启水平滚动条

默认值：空 （字符串类型）

 示例代码：

$(document).ready(function(){
  $('#example').dataTable({
    "sScrollX":"100%",
    "bScrollCollapse": true
  });
});

sScrollY

 是否开启垂直滚动条，滚动条大小受限于Datatable的高度大小

默认值：空（字符串类型）

示例代码：

$(document).ready(function(){
  $('#example').dataTable({
    "sScrollY":"200px",
    "bPaginate":false
  });
});

具体的参数意思可以参考官方文档。这里提一下fnServerParams。这个参数可以帮我们传递页面的其他参数，这个例子中，我传递了关键字、起止日期信息，主要用于服务端的数据查找过滤。

用chrome看一下控件会向服务端传递什么：

这是底部的分页栏

当我点第二页时，传递参数如下：

注意到iDisplayLength是10，因为我默认是每页展示10条数据，这个值可以调整。当我点第二页时，iDisplayStart从0变到10。其实分页就是这么回事，前端告诉服务端，我需要那段数据，你给我找出来返回给我。

服务端的返回格式如下（PHP）：

$ret = array(
                "sEcho" => intval($_GET['sEcho']),
                "iTotalRecords" => $data_count,
                "iTotalDisplayRecords" => $data_count,
                "aaData" => array()
            );