使用ajax刷新表内容后重绘数据表？

Question

我正在使用Datatables并在页面上有一个按钮,使用AJAX刷新表.要清楚表格没有使用ajax数据源,我们只是在需要时使用ajax来刷新它.Ajax正在刷新表所包含的div.我知道我正在丢失我的分页按钮和过滤功能,因为需要重新绘制表,但我不知道如何将其添加到表初始化代码中.

数据表代码

var oTable6;
$(document).ready(function() {
    oTable6 = $('#rankings').dataTable( {
        "sDom":'t<"bottom"filp><"clear">',
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "aoColumns": [ 
            { "bSortable": false, "sWidth": "10px" },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]

    });
});

ajax代码是这样的

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
        function( data ) { 
            $("#ajaxresponse").html(data);
        });
});

我尝试了这个,但它没有用

"fnDrawCallback": function() {
    function( data ) { 
        $("#ajaxresponse").html(data);
    };
},

Answer 1

看起来好像可以使用API​​函数

• 清除表格(fnClearTable)
• 向表中添加新数据(fnAddData)
• 重绘表格(fnDraw)

http://datatables.net/api

UPDATE

我猜你正在使用DOM数据源(用于服务器端处理)来生成表.起初我并没有真正理解,所以我以前的答案对此不起作用.

要在不重写服务器端代码的情况下使其工作:

您需要做的是完全删除旧表(在dom中)并将其替换为ajax结果内容,然后重新初始化数据表:

// in your $.post callback:

function (data) {

    // remove the old table
    $("#ajaxresponse").children().remove();

    // replace with the new table
    $("#ajaxresponse").html(data);

    // reinitialize the datatable
    $('#rankings').dataTable( {
    "sDom":'t<"bottom"filp><"clear">',
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
        "aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

    } 
    );
}

Answer 2

尝试用bDestroy破坏数据表:如下所示:

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
            function( data ) { 

                $("#ajaxresponse").html(data);

                oTable6 = $('#rankings').dataTable( {"bDestroy":true,
                    "sDom":'t<"bottom"filp><"clear">',
                    "bAutoWidth": false,
                    "sPaginationType": "full_numbers",
"aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

} 
);
            });

});

bDestroy:true将在重新初始化新选择器之前首先销毁与该选择器关联的数据表实例.

Answer 3

我不知道为什么.但

oTable6.fnDraw();

适合我.我把它放在下一行.

Answer 4

用这个：

var table = $(selector).dataTables();
table.api().draw(false);

或者

var table = $(selector).DataTables();
table.draw(false);