使用ajax刷新表内容后重绘数据表？
我正在使用Datatables并在页面上有一个按钮，使用AJAX刷新表。 要清楚表格没有使用ajax数据源，我们只是在需要时使用ajax来刷新它。 Ajax正在刷新表所包含的div。我知道我丢失了我的分页按钮和过滤function，因为需要重新绘制表，但我不知道如何将其添加到表初始化代码中。
数据表代码
var oTable6; $(document).ready(function() { oTable6 = $('#rankings').dataTable( { "sDom":'t', "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); }; },
看起来好像可以使用API函数
- 清除表（fnClearTable）
- 向表中添加新数据（fnAddData）
- 重绘表格（fnDraw）
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 ] } ); }
尝试用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将在重新初始化新选择器之前首先销毁与该选择器关联的数据表实例。
我不知道为什么。 但
oTable6.fnDraw();
适合我。 我把它放在下一行。
用这个：
var table = $(selector).dataTables(); table.api().draw(false);
要么
var table = $(selector).DataTables(); table.draw(false);
对于现代DataTables（1.10及更高版本）的用户，此页面上的所有答案和示例均适用于旧API，而不是新API。 我很难找到一个更新的例子，但最终确实找到了这个DT论坛post （TL;大多数人的DR），这让我得到了这个简洁的例子 。
在我最终注意到html字符串周围的$（）选择器语法之后，示例代码对我有用。 您必须添加节点而不是字符串。
这个例子真的值得一看，但是，根据SO的精神，如果你只是想看到一段有用的代码片段：
var table = $('#example').DataTable(); table.rows.add( $( ''+ ' Tiger Nixon '+ ' System Architect '+ ' Edinburgh '+ ' 61 '+ ' 2011/04/25 '+ ' $3,120 '+ ' ' ) ).draw();
细心的读者可能会注意到，因为我们只添加一行数据，所以table.row.add（…）应该也能正常工作并为我做。
这对我有用
var dataTable = $('#HelpdeskOverview').dataTable(); var oSettings = dataTable.fnSettings(); dataTable.fnClearTable(this); for (var i=0; i
在初始化中使用：
"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不能按你想要的方式工作时，更改是永久性的。
这就是我用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] ); } }