Jquery datatables destroy/re-create

2021/01/24 06:41 · jquery ·  · 0评论

I am trying to reload a datatable via a json call. I've using DataTables-1.10.9 and 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.

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.

function fncOpenRemittancesRead(pFrRem,pToRem) {

    wsUrl = "../Json/OpenRemittances.asp"   +
                    "?qryDatabase="         + encodeURIComponent(wsDatabase)    +
                    "&qryFrRemittance=" + encodeURIComponent(pFrRem)            +
                    "&qryToRemittance=" + encodeURIComponent(pToRem);

    $.getJSON(wsUrl, function(data) {

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

        , "destroy":true
        , "info":false
        , "JQueryUI":true
        , "ordering":true
        , "paging":false
        , "scrollY":"500px"
        , "scrollCollapse":true



When DataTables destroys the table because of the option destroy:true it restores original content and discards the content that you've generated.


Remove destroy:true option and destroy the table before you manipulate the table with destroy() API method.

if ( $.fn.DataTable.isDataTable('#tblRemittanceList') ) {

$('#tblRemittanceList tbody').empty();

// ... skipped ...



Remove destroy:true option 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.

In this case you would need to initialize DataTables once on page initialization.

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:


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

just use destroy() method to destory the table like this:


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

datatable refresh
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!