Jquery数据表销毁/重新创建

Question

我试图通过json调用重新加载数据表.我使用DataTables-1.10.9和jquery-2.1.4.

我试过在数据表中使用.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
    });

}

Answer 1

原因

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

解决方案#1

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

解决方案#2

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

在这种情况下,您需要在页面初始化时初始化DataTables一次.

Answer 2

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

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