DataTable.NET 使用server-side processing

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": ""
        }
    } );
} );

转载于:https://www.cnblogs.com/sipher/p/10984285.html