DataTable.NET 使用server-side processing

Posted 2021-12-24 sipher

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