Question

我已经从服务器端加载了数据表，因为我将为服务器端加载提供大量数据集。

var table = $('#table').DataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajax" : { "url": "...", "type": "POST" }, 
     "columns": [ { 
        "orderable": false, 
        "data" : 'id', 
        "render" : function( data, type, meta ) 
                                 { return '..'; }
    },
    {
        "orderable": true,
        "data"     : ".."
    },
    {
        "orderable": true,
        "data"     : "..",
        "className": 'right-align'
    },
    {
        "orderable": true,
        "data"     : "..",
        "className": 'right-align'
    },
    {
        "orderable": false,
        "data"     : 'id',
        "defaultContent": "",
        "className": 'center-align',
        "render"   : function(data, type, meta) {

            return '..';
        }
    },
    {
        "orderable": false, // flags
        "data"     : {
            'inserted' : 'inserted',
            'deleted'  : 'deleted'
        },
        "defaultContent": "",
        "className"    : 'center-align',
        "render"   : '..'
        }
    }
],
'order': [
    [1, "asc"]
],
"language": {
    "lengthMenu": '..'
}

}）;

我要为这个表提供过滤功能（有几个复选框会在更改时触发发布请求）所以我将过滤器发送到后端，它给了我新的数据集。

$.post(url, { 'filters' : data} , function(collection){
     table.clear().draw();
     table.rows.add(JSON.parse(collection));
     table.columns.adjust().draw();
});

它总共发出了3个请求，一个用于发布请求，另外两个绘制请求（因为我正在绘制两次）。

根据服务器端处理，每次绘制表都会产生新的Ajax请求以获取所需的数据。现在这个数据覆盖了我从过滤器获得的数据。

如何使用新数据集绘制表格？或者如何阻止那些服务器端的ajax请求触发。

我尝试了preDrawCallback，这是对整个绘图功能的影响。

$('#table').dataTable( {
  "preDrawCallback": function( settings ) {
     return false;
  }
});

Answer 1

您可以使用ajax.data指定发送到服务器的自定义参数，请参阅下面的方法之一。

$('#example').DataTable({
    "ajax": {
        "url": "data.json",
        "data": function (d){
            d.example_select = $('#example-select').val();
        }
    }
});

每次DataTables从服务器请求数据时，都会调用

ajax.data回调函数。

要在过滤器更改后从服务器重新加载数据，您可以使用ajax.reload()功能，例如：

$('#example-select').on('change', function(){
    $('#example').DataTable().ajax.reload(); 
});

请参阅this JSFiddle进行演示。

数据表 - 在向表

1 个答案: