我正在使用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);
};
},
答案 0 :(得分:26)
看起来好像可以使用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
]
}
);
}
答案 1 :(得分:13)
尝试使用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将首先销毁与该选择器关联的数据表实例。
答案 2 :(得分:7)
我不确定为什么。但
oTable6.fnDraw();
适合我。我把它放在下一行。
答案 3 :(得分:4)
使用此:
var table = $(selector).dataTables();
table.api().draw(false);
或
var table = $(selector).DataTables();
table.draw(false);
答案 4 :(得分:2)
对于现代DataTables(1.10及更高版本)的用户,此页面上的所有答案和示例均适用于旧api,而非新API。我很难找到一个更新的例子,但最终找到了this DT forum post(TL;大多数人的DR),这导致我this concise example。
在我最终注意到html字符串周围的$()选择器语法之后,示例代码对我有用。您必须添加一个节点而不是字符串。
这个例子真的值得一看但是,本着SO的精神,如果你只想看到一段有效的代码:
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(...)也可以正常工作并为我做。
答案 5 :(得分:1)
这对我有用
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();
答案 6 :(得分:1)
在初始化中使用:
"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不能按你想要的方式工作时,更改是永久性的。
答案 7 :(得分:0)
这就是我用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] );
}
}
答案 8 :(得分:0)
检查fnAddData:https://legacy.datatables.net/ref
X = pd.DataFrame(index=['C1','C2','C3'],data={'X1':[0.3,10,34],'X2':[4,7.5,0.1],'X3':[0,0,1.7],'X4':[1.5,11,1],'X5':[1,0.1,0.6]})