使用ajax刷新表格内容后重绘数据表? [英] Redraw datatables after using ajax to refresh the table content?

问题描述

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

I am using Datatables and have a button on the page that refreshes the table using AJAX. To be clear the table isn't using an ajax source of data, we are just using ajax to refresh it only when needed. Ajax is refreshing the div which the table is wrapped in. I know i'm losing my pagination buttons and filtering capability because the table needs to be redrawn but i'm not sure how to add this into the table initialization code.

数据表代码

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 代码是这样的

The ajax code is this

$("#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);
    };
},

推荐答案

看起来你可以使用 API 函数来

It looks as if you could use the API functions to

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

http://datatables.net/api

更新

我猜您正在使用 DOM 数据源(用于服务器端处理)生成您的表格.一开始我并没有真正理解这一点，所以我之前的答案对此不起作用.

I guess you're using the DOM Data Source (for server-side processing) to generate your table. I didn't really get that at first, so my previous answer won't work for that.

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

To get it to work without rewriting your server side code:

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

What you'll need to do is totally remove the old table (in the dom) and replace it with the ajax result content, then reinitialize the datatable:

// 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
        ]

    } 
    );
}

这篇关于使用ajax刷新表格内容后重绘数据表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！