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自動寬度

插件會根據表格内容對寬度進行自動處理