Question

我正在尝试通过json调用重新加载数据表。我使用DataTables-1.10.9和jquery-2.1.4。

我已尝试使用数据表中的.ajax API付款而无处可去，所以我想我会尝试过去曾起诉的这种方法。

如果我在将HTML附加到表格后中断，它看起来没问题（这意味着旧数据已被删除，新数据显示。但是当$（＆＃39;＃ tblRemittanceList＆＃39;）。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

Answer 3

datatable refresh
$('#Clienttbl').dataTable().fnClearTable();

Answer 4

只需使用destroy（）方法来破坏表，如下所示：

double DiffInPips = MathAbs(NormalizeDouble(stopLoss-openPrice,Digits)/Point);

，然后像下面的示例一样重新初始化它：

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

Jquery数据表销毁/重新创建

4 个答案:

原因

解决方案＃1

解决方案＃2