Javascript Jquery 数据表销毁/重新创建
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32713612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery datatables destroy/re-create
提问by Keith
I am trying to reload a datatable via a json call. I've using DataTables-1.10.9 and jquery-2.1.4.
我正在尝试通过 json 调用重新加载数据表。我使用了 DataTables-1.10.9 和 jquery-2.1.4。
I've tried paying with the .ajax API within datatable and got nowhere, so I thought I'd try this approach which I have sued in the past.
我试过使用数据表中的 .ajax API 付款但一无所获，所以我想我会尝试这种我过去曾起诉过的方法。
If I break when the HTML has been appended to the table, it looks OK (by this, I mean that the old data has been removed, and the new data is showing. But when the $('#tblRemittanceList').dataTable({...}); command is issued again, it 'reloads' the old data, not the new. If I don't use datatables, the raw table shows the correct data.
如果我在将 HTML 附加到表格时中断，它看起来没问题（我的意思是旧数据已被删除，新数据正在显示。但是当 $('#tblRemittanceList').dataTable( {...}); 命令再次发出，它“重新加载”旧数据，而不是新数据。如果我不使用数据表，原始表会显示正确的数据。
//----------------------------------------------------------------------------------------
function fncOpenRemittancesRead(pFrRem,pToRem) {
wsUrl = "../Json/OpenRemittances.asp" +
"?qryDatabase=" + encodeURIComponent(wsDatabase) +
"&qryFrRemittance=" + encodeURIComponent(pFrRem) +
"&qryToRemittance=" + encodeURIComponent(pToRem);
$('body').addClass('waiting');
$.getJSON(wsUrl, function(data) {
fncOpenRemittancesFill(data);
$('body').removeClass('waiting');
});
}
//----------------------------------------------------------------------------------------
function fncOpenRemittancesFill(pData) {
var wsHtml = '';
$('#tblRemittanceList tbody').empty();
for (var i = 0; i < pData.length; i++) {
wsHtml += '<tr>';
wsHtml += '<td>' + trim(pData[i].col_1) + '</td>';
wsHtml += '<td>' + trim(pData[i].col_2) + '</td>';
wsHtml += '<td>' + trim(pData[i].col_3) + '</td>';
wsHtml += '<td>' + fncFormatDate(pData[i].col_4,4) + '</td>';
wsHtml += '<td>' + fncFormatNumber(pData[i].col_5,2,"N") + '</td>';
wsHtml += '<td>' + trim(pData[i].col_6) + '</td>';
wsHtml += '<td>' + fncFormatNumber(pData[i].col_7,2,"N") + '</td>';
wsHtml += '<td>' + trim(pData[i].col_8) + '</td>';
wsHtml += '</tr>';
}
$('#tblRemittanceList > tbody:last').append(wsHtml);
$('#tblRemittanceList').dataTable({
"autoWidth":false
, "destroy":true
, "info":false
, "JQueryUI":true
, "ordering":true
, "paging":false
, "scrollY":"500px"
, "scrollCollapse":true
});
}
回答by Gyrocode.com
CAUSE
原因
When DataTables destroys the table because of the option destroy:trueit restores original content and discards the content that you've generated.
当 DataTables 由于选项destroy:true而破坏表时，它会恢复原始内容并丢弃您生成的内容。
SOLUTION #1
解决方案#1
Remove destroy:trueoption and destroy the table before you manipulate the table with destroy()API method.
destroy:true在使用destroy()API 方法操作表之前，删除选项并销毁表。
if ( $.fn.DataTable.isDataTable('#tblRemittanceList') ) {
$('#tblRemittanceList').DataTable().destroy();
}
$('#tblRemittanceList tbody').empty();
// ... skipped ...
$('#tblRemittanceList').dataTable({
"autoWidth":false,
"info":false,
"JQueryUI":true,
"ordering":true,
"paging":false,
"scrollY":"500px",
"scrollCollapse":true
});
SOLUTION #2
解决方案#2
Remove destroy:trueoption and instead of destroying and recreating the table use clear()to clear the table content, rows.add()to add the table data and then draw()to re-draw the table.
删除destroy:true选项，而不是破坏和重新创建表格使用clear()清除表格内容，rows.add()添加表格数据，然后draw()重新绘制表格。
In this case you would need to initialize DataTables once on page initialization.
在这种情况下，您需要在页面初始化时初始化 DataTables。
回答by Dierp
You can initialize your datatables using the retrieve option like this:
您可以使用检索选项初始化您的数据表，如下所示：
var table = $('#myTable').DataTable( {
dom: 'Bfrtip',
retrieve: true, ...
Than you have to clear and destroy it:
比你必须清除和销毁它：
$('#myTable').DataTable().clear().destroy();
By the last you recreate your datatables:
到最后你重新创建你的数据表：
var table = $('#myTable').DataTable( {
dom: 'Bfrtip',
retrieve: true,
Check the Retrieve tutorial here: https://datatables.net/reference/option/retrieve
在此处查看检索教程：https: //datatables.net/reference/option/retrieve
回答by Jaydeepsinh Makwana
datatable refresh
$('#Clienttbl').dataTable().fnClearTable();
回答by Jasbin Karki
just use destroy() method to destory the table like this:
只需使用 destroy() 方法来销毁表，如下所示：
$('#experience-table').DataTable().destroy();
and re-initialise it like this example:
并像这个例子一样重新初始化它：
var table= $('#experience-table').DataTable({
processing: true,
serverSide: true,
ajax: '{{url('employee/experience/list/experience')}}'+'/'+emp_id,
columns: [
{ data: 'emp_no', name: 'emp_no' },
{ data: 'position', name: 'position' },
{ data: 'organization', name: 'organization' },
{ data: 'duration', name: 'duration' },
{ data: 'action', name: 'action' },
],
searching: false
});
