https://datatables.net/examples/server_side/simple.html
當頁面上要顯示的數據在10萬筆以上時,可以使用server-side processing. 這樣在change entries, paging, sorting的時候,會通過事先定義好的ajax去backend重新取得數
RadGridTable = $('#tbNKeywords') .on( 'processing.dt', function ( e, settings, processing ) { // paging or sorting .etc processing or not, // processing will be true if processing finished. $('#loading_overlay').css( 'display', processing ? 'block' : 'none' ); }) .on('xhr.dt', function ( e, settings, json, xhr ) { // Ajax call back, add some code here... if (json == null || json["success"] == false) { $('#loading_overlay').css( 'display', 'none' ); } }) .on( 'draw.dt', function () { // check all rows if select-all checked if($(".select-all").is(":checked")) { CheckedAll = 1; RadGridTable.rows().select(); } // reset select checkbox by saved selected row ids RadGridTable.rows().every( function ( rowIdx, tableLoop, rowLoop ) { if (AllSelectedRowIds.includes(this.id())) this.select(); } ); }) .on( 'page.dt', function () { if (CheckedAll == 1) return; // save selected row id when paging var selectedRowIds = RadGridTable.rows( { selected: true } ).ids(); for (i = 0; i < selectedRowIds.count(); i++) { if (!AllSelectedRowIds.includes(selectedRowIds[i])) AllSelectedRowIds.push(selectedRowIds[i]); } }) .on( 'click', 'tbody tr', function () { if (CheckedAll == 1) return false; }) .DataTable({ "columns": [ { "data": null }, { "data": "Created_Date" }, { "data": "xxxxxxxx" }, { "data": "xxxxxxxx" }, { "data": "xxxxxxxx" }, { "data": "xxxxxxx" }, { "data": "xxxxxxx" } ], columnDefs: [{ orderable: false, className: 'select-checkbox', targets: 0, data: null, defaultContent: '' }], select: { style: 'multi', selector: 'td:first-child' }, order: [[ 1, 'desc' ]], "paging": true, "searching": false, colReorder: false, fixedHeader: true, "processing": true, "serverSide": true, rowId: 'KeywordId', "language": { "infoFiltered": "" // remove "(filtered from x total entries)" part from datatable footer information. }, "dom": '<"top"flp<"clear">>rt<"bottom"ip<"clear">>', "ajax": { "url": "/common/service/xxxxxxxxHandler.ashx", "type": "POST", "data": function (d) { d.action = "xxxxxxxxx"; d.data = JSON.stringify(xxxxxxx); d.Id = <%=Id%>; } } });
define dataTable頁面上的一些文字部分
https://datatables.net/reference/option/language
例如: 不想要顯示 "(filtered from x total entries)" 在 footer的部分
$(document).ready(function() { $('#example').DataTable( { "language": { "infoFiltered": "" } } ); } );