jQuery datatables是什麼？ datatables如何使用？

Datatables簡介

DataTables是一個jQuery的表格外掛程式。這是一個高度靈活的工具，依據的基礎逐步增強，這將增加先進的互動控制，支援任何HTML表格。主要特點：

• 自動分頁處理

• 即時表格資料過濾

• 資料排序以及資料型別自動偵測

• 自動處理列寬度

• ##可透過CSS自訂樣式

• #支援隱藏列

• 易用

• 可擴展性與靈活性

• 可擴充性與彈性

• ##國際化

動態建立表格

#免費的

#二、如何使用

在做後台的時候並沒有美工和前端工程師來配合你做頁面，為了顯示數據並有一定的美感，我們可以使用jQuery的DataTables外掛程式來幫助我們完成任務1、DataTables的預設設定

 $(document).ready(function() { 
$('#example').dataTable(); 
} );

#2、DataTables的一些基礎屬性配置

#

 "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度

##3、資料排序

$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} );

從第0列開始，以第4列倒序排列

 4、隱藏某些欄位

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} );

5、國際化

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每页显示 _MENU_ 条记录", 
"sZeroRecords": "抱歉， 没有找到", 
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", 
"sInfoEmpty": "没有数据", 
"sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
"oPaginate": { 
"sFirst": "首页", 
"sPrevious": "前一页", 
"sNext": "后一页", 
"sLast": "尾页" 
}, 
"sZeroRecords": "没有检索到数据", 
"sProcessing": "<img src=&#39;./loading.gif&#39; />" 
} 
} ); 
} );

6、排序功能：

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );

• 7、資料取得支援4種：如下
  

• ##•DOM  文檔資料 
  

• •Javascript array  js陣列 
  

• •Ajax source     Ajax請求資料 

###### #######•Server side processing  伺服器端資料  ################

以上是jQuery datatables是什麼？ datatables如何使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！