JQuery：Datatables

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

• 自动分页处理

• 即时表格数据过滤

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

• 自动处理列宽度

• 可通过CSS定制样式

• 支持隐藏列

• 易用

• 可扩展性和灵活性

• 国际化

• 动态创建表格

• 免费的 

1、bAutoWidth：是否启用自动适应列宽

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

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

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

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

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

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

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

5、bJQueryUI：是否启用  jQuery UI 皮肤插件支持

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

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

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

7、bPaginate：是否开启分页

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

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

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

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

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

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

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

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

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

12、bSortClasses  ：排序

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

13、bStateSave ：是否开启cookies保存当前状态信息

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

13、sScrollX ：是否开启水平滚动条

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

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

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