JQuery datatables уничтожает/воссоздает

Я пытаюсь перезагрузить datatable через json-вызов. Я использую DataTables-1.10.9 и jquery-2.1.4.

Я пробовал платить с API.ajax в формате datatable и не получил нигде, поэтому я решил попробовать этот подход, который я подал в прошлом.

Если я разорву, когда HTML добавлен в таблицу, он выглядит нормально (я имею в виду, что старые данные были удалены, а новые данные отображаются. Но когда $('# tblRemittanceList'),.dataTable({...}); команда выдается снова, она перезагружает старые данные, а не новые. Если я не использую datatables, необработанная таблица показывает правильные данные.

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

}

Ответ 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 один раз при инициализации страницы.

Ответ 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

Ответ 3

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