jquery.dataTable.js 基礎配置使用
阿新 • • 發佈:2018-12-19
$("#mainTable").dataTable({ /* * sErrMode * 錯誤資訊顯示方式 * 分別為alert和throw,預設為alert */ "sErrMode": "throw", /* * sDom * 佈局方式,可以自定義,佈局項,也可以調換佈局順序 * 詳解: * <> 表示一個閉合的div 例如:<> = <div></div> * <"類名稱"> 表示一個class="類名稱"的閉合的div 例如: <"rad"> = <div class="rad"></div> * l 每行顯示的記錄數 * f 搜尋框 * r 載入時的進度條 * t 表格,即實際的<table></table> * p 分頁條 * i 資料資訊, 每頁顯示x條資料、第x條-第x條、供x條資料,預設是英文 */ "sDom": '<lf>rt<lpi><"clear">', /* * sServerMethod * 資料獲取方式 * POST/GET,預設是GET */ "sServerMethod": "POST", /* * bDeferRender * 是否啟用延遲載入:當你使用AJAX資料來源時,可以提升速度。 * 預設為false */ "bDeferRender": true, /* * sScrollXInner * 表格寬度 */ "sScrollXInner": "100%", /* * bScrollCollapse * 當顯示的資料不足以支撐表格的預設的高度時,依然顯示縱向的滾動條。(預設是false) */ "bScrollCollapse": false, /* * bPaginate * 是否開啟分頁,預設是true */ "bPaginate": true, /* * bLengthChange * 是否允許使用者,在下拉列表自定義選擇分頁大小(10, 25, 50 and 100),需要分頁支援 * 預設為true */ "bLengthChange": false, /* * bFilter * 是否啟用內建搜尋功能:可以跨列搜尋。 * 預設為true */ "bFilter": true, /* * bSort * 是否開啟列排序功能,如果想禁用某一列排序,可以在每列設定使用bSortable引數 */ "bSort": true, /* * bInfo * 是否顯示錶格相關資訊:例如翻頁資訊等。 * 預設值:True */ "bInfo": true, /* * bAutoWidth * 是否啟用自動適應列寬 * 預設值:True */ "bAutoWidth": false, /* * bStateSave * 是否開啟cookies儲存當前狀態資訊 * 預設值:false */ "bStateSave": false, /* * sPaginationType * 分頁方式 * dataTable提供full_numbers和two_button,預設是two_button * 這裡採用的是自定義分頁myPagination,詳細參見jquery.dataTable.custom.js */ "sPaginationType": "myPagination", /* * bProcessing * 是否顯示載入時進度條,預設為false */ "bProcessing": true, /* * iDisplayLength * 預設每頁顯示多少條記錄 */ "iDisplayLength": 10, /* * aLengthMenu * 允許使用者選擇每頁顯示多少條記錄 */ "aLengthMenu": [[50, 100, -1], ["50", "100", "所有"]], /* * oLanguage * 語言設定,dataTable預設為英文,可再此設定中文顯示 * 注意:_MENU_、_START_、_END_、_TOTAL_、_MAX_等通配 */ "oLanguage": { "sLengthMenu": "每頁顯示 _MENU_ 條記錄", "sZeroRecords": "對不起,沒有匹配的資料", "sInfo": "第 _START_ - _END_ 條 / 共 _TOTAL_ 條資料", "sInfoEmpty": "沒有匹配的資料", "sInfoFiltered": "(資料表中共 _MAX_ 條記錄)", "sProcessing": "正在載入中...", "sSearch": "全文搜尋:", "oPaginate": { "sFirst": "第一頁", "sPrevious": " 上一頁 ", "sNext": " 下一頁 ", "sLast": " 最後一頁 " } }, /* * aoColumns * 資料列 * mData 資料來源屬性 * sTitle 列頭 * bSortable 是否參與排序 * mRender 自定義顯示內容,可返回html、字串 */ "aoColumns": [{ "mData": 'id', "sTitle": "ID", "bSortable": true }, { "mData": 'name', "sTitle": "Name", "bSortable": true }, { "mData": 'age', "sTitle": "Age", "bSortable": true, "mRender": function (data, type, row) { return data; } }, { "mData": 'work', "sTitle": "Work", "bSortable": true }], /* * fnInitComplete * 表格初始化完成後的回撥 */ "fnInitComplete": function () { }, /* * fnDrawCallback * 表格繪製完成後的回撥 */ "fnDrawCallback": function () { }, /* * 資料來源url,ajax請求路徑 */ "sAjaxSource": "xx/xx/xxx/xxx/xxx" });