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": ""
            }
        } );
    } );
  • 相关阅读:
    android中kl布局文件加载失败解决办法
    android系统输入按键流程
    linux键值转android键值配置文件
    linux键值到Android键值的转换与自定义
    linux中ioctl的应用与说明
    zabbix邮件告警
    linux 双网关双IP设置
    随笔
    记录一次事故
    python解析.yml/.yaml文件--pyyaml模块(第三方)
  • 原文地址:https://www.cnblogs.com/sipher/p/10984285.html
Copyright © 2011-2022 走看看