具體檢視參考文檔 https://datatables.net/examples/index 其他參看: https://www.cnblogs.com/amoniyibeizi/p/4548111.html 例子如下:
jQuery(function ($) {
//initiate dataTables plugin
var myTable =
$('#dynamic-table')
//.wrap("<div class='dataTables_borderWrap' />") //if you are applying horizontal scrolling (sScrollX)
.DataTable({
"bPaginate": true, //是否顯示分頁
"bLengthChange": true, //每行顯示的記錄數
"bFilter": true, //搜尋欄
"bSort": true, //是否支援排序功能
"bInfo": true, //顯示表格資訊
"bAutoWidth": false, //自适應寬度
"aaSorting": [[1, "asc"]], //給清單排序 ,第一個參數表示數組 (由0開始)。1 表示Browser列。第二個參數為 desc或是asc
"aoColumns": [//不排序與排序顔色不同
{ "bSortable": false },
null,
null,
null,
null,
null,
{ "bSortable": false },
{
"bSortable": false,
"bVisible": true, //不可見
"bSearchable": false, //參與搜尋
},
{
"bSortable": false,
"bVisible": true, //不可見
"bSearchable": false, //參與搜尋
},
{
"bSortable": false,
"bVisible": true, //不可見
"bSearchable": false, //參與搜尋
},
{
"bSortable": false,
"bVisible": true, //不可見
"bSearchable": false, //參與搜尋
},
{
"bSortable": false,
"bVisible": true, //不可見
"bSearchable": false, //參與搜尋
}
],
//"bProcessing": true,
//"bServerSide": true,
//"sAjaxSource": "http://127.0.0.1/table.php" ,
//,
//"sScrollY": "200px",
//"bPaginate": false,
//"sScrollX": "100%",
//"sScrollXInner": "120%",
//"bScrollCollapse": true,
//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
//you may want to wrap the table inside a "div.dataTables_borderWrap" element
//"iDisplayLength": 50,
"bStateSave": true, //儲存狀态到cookie *************** 很重要 , 當搜尋的時候頁面一重新整理會導緻搜尋的消失。使用這個屬性就可避免了
"sPaginationType": "full_numbers", //分頁,一共兩種樣式,full_numbers和two_button(預設)
select: {
style: 'multi'
},
"aaSorting": [],
"oLanguage": {
"sEmptyTable": "對不起,表中沒有資料。",
"sInfo": "目前顯示 _START_ 到 _END_ 條,共 _TOTAL_ 條記錄",
"sInfoEmtpy": "找不到相關資料",
"sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
"sInfoPostFix": " ",
"sInfoThousands": ",",//千位分隔符
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sLoadingRecords": "載入中...",
"sProcessing": "正在加載中...",
"sSearch": "搜尋:",
"sZeroRecords": "對不起,搜尋不到任何相關資料。",
"oPaginate": {
"sFirst": "第一頁",
"sPrevious": " 上一頁 ",
"sNext": " 下一頁 ",
"sLast": " 最後一頁 "
},
"oAria": {
"sSortAscending": "可以按升序對列進行排序",
"sSortDescending": "可以按降序對列進行排序"
}//,
//"sUrl": "", //多語言配置檔案,可将oLanguage的設定放在一個txt檔案中,例:Javascript/datatable/dtCH.txt
}
});