Jquery数据表销毁/重新创建

Jquery datatables destroy/re-create

本文关键字：创建 新创建 数据表 Jquery      更新时间：2023-09-26

我试图通过json调用重新加载一个数据表。我使用的是datatable -1.10.9和jquery-2.1.4。

我试过用datatable内的。ajax API支付，没有任何结果，所以我想我会尝试这种方法，我过去曾起诉过。

如果我在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
    });
}

原因

当datattables因为选项destroy:true而销毁表时，它会恢复原始内容并丢弃您生成的内容。

解决方案# 1

在使用destroy() API方法操作表之前，删除destroy:true选项并销毁表。

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
});

解决方案# 2

删除destroy:true选项，而不是破坏和重新创建表，使用clear()清除表内容，rows.add()添加表数据，然后draw()重新绘制表

在这种情况下，您需要在页面初始化时初始化datatable。

您可以使用如下的检索选项初始化您的数据表:

var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true, ...

那么你必须清除并销毁它:

$('#myTable').DataTable().clear().destroy();

最后重新创建数据表:

 var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true,

查看这里的检索教程:https://datatables.net/reference/option/retrieve

使用destroy()方法来销毁表，如下所示:

$('#experience-table').DataTable().destroy();

并重新初始化，如下例:

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

                });

datatable refresh
$('#Clienttbl').dataTable().fnClearTable();
相关文章：