Jquery DataTable 的学习之基础配置（二）

2017-01-12 03:19:31

本文将介绍jquery DataTable的一些基础配置，如分页、排序、过滤等，代码如下

$(document).ready(function() { 
$('#example').dataTable({
    "bPaginate": true, //分页功能 
    "bLengthChange": true, //改变每页显示数据数量 
    "bFilter": true, //过滤功能 
    "bSort": true, //排序功能 
    "bInfo": true,//页脚信息 
    "bAutoWidth": true//自动宽度 

}); 
} );           

复制

1.1分页功能

当开启分页功能后，jquery DataTable将会在页面上将表格进行分页处理，此分页的方式与后台无关，只需要在初始化之前将数据填充到表格当中，然后进行表格初始化操作，之后插件会自动对表格进行分页处理。

1.2改变每页显示数据数量

此功能的前提是需要开启分页功能，它可以控制每页显示的数据量，插件会根据每页显示的数据量自动进行分页处理，同样不需要后台控制，只与前端页面相关。

1.3过滤功能

过滤功能也可以叫做为搜索查询功能，该功能在大数据量的表格中作用尤为突出，当数据量很大时，用户不想通过翻页的方式来逐条搜索，通过后台搜索查询的方式又很慢，这时就显示出了该功能的优越性。它可以在当用户输入每个字符时进行表格全文字段搜索，搜索出相关的信息展示出来，同时进行分页处理。

1.4排序功能

通过设置排序功能后用户可以在点击表头时进行排序处理，例如某列为价格信息，那么点击价格列后，插件会自动根据价格进行排序，可进行升序和降序排序。通过设置可以设定某列允许排序，某列不允许排序。代码如下

"aoColumns": [
	{ "bSortable": true },
	null, null, null,
	{ "bSortable": false }
],           

复制

通过对每列进行设置，需要进行排序的设置为null或者为“bSortable”:true，不需要进行排序的设置为“bSortable”:false，该方法的弊端为必须要知道表格有多少列，否则会报错。

1.5页脚信息

填入页脚信息会在表格最下方显示一个文字信息，来对表格进行描述说明等。

1.6自动宽度

插件会根据表格内容对宽度进行自动处理