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

【问题标题】：Redraw datatables after using ajax to refresh the table content?使用ajax刷新表格内容后重绘数据表？
【发布时间】：2011-12-10 18:24:51
【问题描述】：

我正在使用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);
    };
},

【问题讨论】：

您能否发布您的完整数据表代码以及与之相关的 html？
我已经更新了上面的代码以显示表格的整个初始化
@agunn 为什么不链接到该问题的所选答案而不是您自己的答案？该问题的选择答案是stackoverflow.com/a/7890909/804087
注意：对于现代数据表 api（v1.10 及更高版本）的用户，我在下面（stackoverflow.com/a/40554137/165164）发布了一个使用该变体的答案。 AFAICS，到目前为止，这个问题的所有答案都使用 v1.9 和之前的 api 语法。
@anagio，我在下面链接到我的答案，因为我相信在这里有一个指向更新的答案的指针是有用的，它指的是更新的 DT api。我没有提到任何其他 SO 帖子问题/答案，因为我没有找到使用现代 DT 1.10 api 语法的问题/答案。感谢您质疑我是否做出正确选择的权利，但在我看来，您实际上删除了我的评论。我很困惑吗？我不认为删除我的评论，而不是回应它，符合 SO 的精神。

标签： jquery ajax datatables

【解决方案1】：

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

清空表（fnClearTable）
向表中添加新数据 (fnAddData)
重绘表格 (fnDraw)

http://datatables.net/api

更新

我猜你正在使用DOM Data Source（用于服务器端处理）来生成你的表。一开始我并没有真正明白这一点，所以我之前的答案对此不起作用。

在不重写服务器端代码的情况下让它工作：

您需要做的是完全删除旧表（在 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
        ]

    } 
    );
}

【讨论】：

我一直在尝试使用所有这三个方法，但没有成功。我可以在我看到旧数据清除的 ajax 函数之前调用 clearTable。然后我在 ajax 函数之后有 fnDraw 并且它没有重绘表格。 ajax 响应包括其他 html 而不仅仅是所以我确定我需要专门重绘 #rankings 表

在我看来 fnAddData 函数接受的是数据数组，而不是 HTML

那么有没有在不重新编码 ajax 以获取数组的情况下刷新我的表？

【解决方案2】：

尝试像这样使用 bDestroy:true 销毁数据表：

$("#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 将首先销毁与该选择器关联的数据表实例，然后再重新初始化一个新实例。

【讨论】：

抱歉，有一个菜鸟问题，但您是如何在表格中填写新数据的？这是$("#ajaxresponse").html(data);吗？
这对我有用。我使用 ajax 将我的意大利面条内容放入表中。我将"bDestroy":true, 添加到参数中。之后初始化数据表加载的每个 ajax 内容。 thnx @Keith.Abramo

【解决方案3】：

我不知道为什么。但是

oTable6.fnDraw();

为我工作。我把它放在下一行。

【讨论】：

因为 oTable6 是使用 $(element).dataTables() 而不是 DataTables 类启动的。

【解决方案4】：

使用这个：

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

或

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

【讨论】：

【解决方案5】：

对于现代 DataTables（1.10 及更高版本）的用户，此页面上的所有答案和示例均针对旧 api，而不是新 api。我很难找到一个更新的例子，但最终还是找到了this DT forum post（TL；对于大多数人来说是DR），这让我找到了this concise example。

在我终于注意到 html 字符串周围的 $() 选择器语法后，示例代码对我有用。您必须添加一个节点而不是字符串。

该示例确实值得一看，但是，本着 SO 的精神，如果您只想查看有效的 sn-p 代码：

var table = $('#example').DataTable();
  table.rows.add( $(
          '<tr>'+
          '  <td>Tiger Nixon</td>'+
          '  <td>System Architect</td>'+
          '  <td>Edinburgh</td>'+
          '  <td>61</td>'+
          '  <td>2011/04/25</td>'+
          '  <td>$3,120</td>'+
          '</tr>'
  ) ).draw();

细心的读者可能会注意到，由于我们只添加一行数据，table.row.add(...) 应该也能正常工作，并且对我有用。

【讨论】：

【解决方案6】：

这对我有用

var dataTable = $('#HelpdeskOverview').dataTable();

var oSettings = dataTable.fnSettings();
dataTable.fnClearTable(this);
for (var i=0; i<json.aaData.length; i++)
{
   dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
dataTable.fnDraw();

【讨论】：

【解决方案7】：

在初始化时使用：

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    //* Add some extra data to the sender *
                    newData = aoData;
                    newData.push({ "name": "key", "value": $('#value').val() });

                    $.getJSON( sSource, newData, function (json) {
                        //* Do whatever additional processing you want on the callback, then tell DataTables *
                        fnCallback(json);
                    } );
                },

然后只需使用：

$("#table_id").dataTable().fnDraw();

fnServerData 中重要的是：

    newData = aoData;
    newData.push({ "name": "key", "value": $('#value').val() });

如果您直接推送到 aoData，则更改在您第一次绘制表格时是永久性的，并且 fnDraw 不会按您想要的方式工作。

【讨论】：

【解决方案8】：

这就是我用 ajax 检索的数据提供表格的方式（不确定这是否是最佳实践，但感觉直观且效果很好）：

/* initialise table */
oTable1 = $( '.tables table' ).dataTable
( {
    'sPaginationType': 'full_numbers',
    'bLengthChange': false,
    'aaData': [],
    'aoColumns': [{"sTitle": "Tables"}],
    'bAutoWidth': true
} );


 /*retrieve data*/
function getArr( conf_csv_path )
{
    $.ajax
    ({
        url  : 'my_url'
        success  : function( obj ) 
        {
            update_table( obj );
        }
    });
}


/* build table data */
function update_table( arr )
{        
    oTable1.fnClearTable();
    for ( input in arr )
    {
        oTable1.fnAddData( [ arr[input] );
    }                                
}

【讨论】：

【解决方案9】：

检查 fnAddData：https://legacy.datatables.net/ref

$(document).ready(function () {
  var table = $('#example').dataTable();
  var url = '/RESTApplicationTest/webresources/entity.person';
  $.get(url, function (data) {
    for (var i = 0; i < data.length; i++) {
      table.fnAddData([data[i].idPerson, data[i].firstname, data[i].lastname, data[i].email, data[i].phone])
    }
  });
});

【讨论】：