zoukankan      html  css  js  c++  java
  • 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": ""
            }
        } );
    } );
  • 相关阅读:
    js实现深拷贝的几种方法
    禁止浏览器的默认行为 图片拖动 复制 剪切 右击
    祈祷奇迹,其实不如无尽的练习
    洛谷P4643 [国家集训队]阿狸和桃子的游戏 & 初赛心情
    Re:prime 关于质数的算法
    【洛谷有题】NOIP 2014 提高组初赛试题 订正 网络协议 检索/比较次数计算
    补码的快速计算
    2020洛谷初赛模拟 订正
    【洛谷有题】NOI 笔试题库(非初赛)订正
    树状数组小结
  • 原文地址:https://www.cnblogs.com/sipher/p/10984285.html
Copyright © 2011-2022 走看看