数据表和服务器端处理 - 按需加载

Question

我使用DataTables构建了简单的表,并且我成功连接了服务器端脚本以使用数据填充表.

在我的表格上方,我有2个复选框和2个日期选择来指定过滤标准.当我的页面加载时,我得到表填充,因为在启动时,datatable正在从服务器中提取第一页数据.

我想禁用第一个初始数据加载,所以当页面加载时我会得到空表,然后在我选择标准后按"加载"按钮数据将被加载.

我知道如何将我的过滤器标准添加到服务器参数,我需要做的是在用户点击按钮后从服务器加载数据.

下面是我的数据表脚本:

var myTable= $('table#myTable').dataTable({
    "table-layout": "fixed",
    "bJQueryUI": true,
    "sDom": '<"H"lpr>t<"F"ip>',
    "iDisplayLength": 25,
    "aLengthMenu": [[25, 50, 100, 500], [25, 50, 100, 500]],
    "bSort": false,
    "sPaginationType": "full_numbers",
    "bPaginate": true,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "Data.asmx/Sales",
    "fnServerData": function(sSource, aoData, fnCallback) {
        var sEcho = aoData[0].value;
        var iDisplayStart = aoData[3].value;
        var iDisplayLength = aoData[4].value;

        $.ajax({
            contentType: "application/json; charset=utf-8",
            type: "POST",
            url: sSource,
            //below are my parameters
            data: "{'sEcho': '" + sEcho
                + "','iDisplayStart': '" + iDisplayStart
                + "','iDisplayLength': '" + iDisplayLength
                + "'}",
            success: function(msg) {
                fnCallback(msg.d);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.responseText);
            }
        });
    },
    "bAutoWidth": false,
    "aoColumns": [{
            "sType": "numeric",
            "mData": "Nr",
            "sWidth": "50px"
        }, {
            "sType": "string",
            "mData": "Name"
        }, {
            "sType": "string",
            "mData": "Surname"
        }]
});

Answer 1

您只需将iDeferLoading参数指定给datatables,您的表已包含在DOM中的记录数,如果没有记录,则为0.

$(document).ready(function() {
$('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "iDeferLoading": 0
} );
} );