DataTable not forming back properly after destroy

arturEC

Hello!

I have a strange problem with my datatables. In my code, I have a jquery onChange piece of code that refreshes the datatable which is generated by a separate PHP file. The jQuery code is as follows

$("select[name='stocktake_id_sel'").on('change', function() {
         var stocktake_id = document.getElementsByName("stocktake_id_sel")[0].value;
        //alert(stocktake_id);
        table.destroy();
        $('#tbl_products_list').load('load_purchases.php?action=reload_table&stocktake_id='+stocktake_id+'');
    });

In the PHP file, I first build the table

<table style=' height:10px; margin-left:-10px' id="tbl_products_list" class="table table-fixed table-striped table-bordered datalist"  cellspacing="0">
    <thead>
        
            <tr >
                 <th style='width:40%;'> Supplier Name  </th>
                 <th style='width:20%;'> Delivery Number </th>
                 <th style='width:10%;'> PO Number </th>
                 <th style='width:10%;'> Delivery Date </th>
                 <th style='width:10%;'> Cost Value </th>
                <th style='width:5%;'> Edit </th>
                <th style='width:5%;'> Delete </th>
             </tr>

    </thead> 

    <tbody>
    <?
    $query = "SELECT p.id AS id, p.date AS delivery_date, p.delivery_number, p.po_number, p.cost_value, sp.supplier_name FROM store_purchases p INNER JOIN supplier_master sp ON sp.id = p.supplier_id WHERE p.store_id = '$store_id' AND sp.store_id = '$store_id' AND p.stocktake_id = '$stocktake_id'  ;";
    //echo $query;
    $retval     =   f_select_query($query, $datarows);
    
    
    
    if ($retval == -1 ) 
    {
        $connected = false;
        return -1;
    }
    $department_id_dropdown     =   f_get_dropdown("id", "supplier_name", "supplier_master", "", "supplier_id", " store_id = $store_id", '', '', '', false, false, true);
    $rowcount =  count($datarows);
    for ($counter = 0; $counter< $rowcount; $counter++)
    {
        $delivery_id = $datarows[$counter]->id;
        $supplier_name = truncate(f_htmlspecialchars_decode($datarows[$counter]->supplier_name , ENT_QUOTES), 150);
        $delivery_number = $datarows[$counter]->delivery_number;
        $po_number = $datarows[$counter]->po_number;
        $delivery_date = $datarows[$counter]->delivery_date;
        $cost_value = $datarows[$counter]->cost_value;
        $kid_value                      =    string_encrypt($datarows[$counter]->id);
        
        if ($po_number == '0')
            $po_number = '';
        
        $delivery_date = strtotime($delivery_date);
        $delivery_date = date('d-m-Y',$delivery_date);
        
        echo "<tr>";                    
        echo "<td style='width:40%;'>$supplier_name</td>";
        echo "<td style='width:20%;'><center> $delivery_number </td>";
        echo "<td style='width:10%;'><center>$po_number <input name='product_id' class='form-control product_id' value='$delivery_id' type='hidden'/> </td>";
        echo "<td style='width:10%;'><center> $delivery_date  </td>";
        echo "<td style='width:10%;'><center> $cost_value </td>";
        echo "<td style='width:5%;'><button id='products_button' class='btn dt_buttons ajax_forms' data-keyid='' data-source='get_purchase_data.php' data-id='$delivery_id' data-target='popup' data-element=''><i class='fa fa-list fa-md'></i><span>&nbsp; Edit </span></button></td>" ;
        echo "<td style='width:5%;'> <span class='delete_record' id='StorePurchases_$kid_value'> <i class='fa fa-trash-o fa-lg'></i> </span></td>";
        echo "</tr>";
    }
    ?>

</tbody>
</table>

And then initialise it through jQuery, in the same PHP file

     table = $('#tbl_products_list').DataTable( {
       stateSave: true,
       "bFilter" : true,
        "responsive" : true,
        "order": [[ 3, "desc" ]]
    }); 

The first instance of the table loads absolutely fine with no issues, as can be seen http://prntscr.com/jpjpkj, all sizing is correct, search and sorting functions are working properly. However, whenever I make a change to the dropdown and the page is refreshed, ie. data regenerated, it seems to create a weird outcome. Sorting is gone and I am not able to search through the datatable. Please see this http://prntscr.com/jpjp2s
Where am I going wrong or what am I missing?

colin

Hi @arturEC ,

Yep, that's definitely looking odd, especially as it did load successfully the first time.

The only thing I can think of is perhaps before you recreate the table, you're not entirely removing the old one. destroy() removes all the DataTables instances, but it'll leave the HTML in the DOM - you might be doing something odd and adding to the original table as opposed to a fresh, clean one. You can pass in true to destroy() if you want the table removed from the DOM too.

Other than that, I'm not sure. If that doesn't help, would you be able to give us a link to that page so we can snoop around?

Cheers,

Colin

arturEC

Hi @colin ,

Thank you for your suggestion. I have tried adding the true parameter to the destroy() API but now when I change the variable in the dropdown, the datatable is gone completely. No errors in console, just disappears (http://prntscr.com/jr4g77). When I remove the true, it's back again but not formatted.

The weird thing is that after the table is loaded in that weird format, it seems like it doesn't see any data, please see this screenshot http://prntscr.com/jr4ifh where it says "No data available in table". Could it possibly be the order in which I am doing things?
This is my jQuery for the select statement.

$("select[name='stocktake_id_sel'").on('change', function() {
         var stocktake_id = document.getElementsByName("stocktake_id_sel")[0].value;
        //alert(stocktake_id);
        table.destroy(true);
        $('#tbl_products_list').load('load_purchases.php?action=reload_table&stocktake_id='+stocktake_id+'');
    });

The table is then initialised in the load_purchases.php file

$(document).ready(function() {
table = $('#tbl_products_list').DataTable( {
   stateSave: true,
   "bFilter" : true,
    "responsive" : true,
    "order": [[ 3, "desc" ]]
});
})

And that seems to work ok, since as I mentioned, the first instance loads just fine.

The link to the page is http://easycount.io/platformDev2/purchases_list.php
I will send you login credentials through a private message if that's OK, as I'd prefer not to share them on a public forum, even if it's a dev environment.

Thanks,
Artur

colin

Hi @Artur ,

I haven't received the credentials - please send them if you'd like me to take a look,

Cheers,

Colin