DataTable не формируется обратно должным образом после destroy ()

Question

У меня странная проблема с моими данными.В моем коде у меня есть фрагмент кода jquery onChange, который обновляет данные, которые генерируются отдельным файлом PHP.Код jQuery выглядит следующим образом:

$("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+'');
});

В файле PHP я сначала создаю таблицу

<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>";
}
?>

И затем инициализирую ее через jQuery, в том жеPHP-файл

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

Первый экземпляр таблицы загружается абсолютно без проблем, как видно здесь , все размеры правильные.Тем не менее, всякий раз, когда я делаю изменения в раскрывающемся меню и страница обновляется, т.е.данные регенерированы, кажется, создает странный результат.Пожалуйста, посмотрите этот снимок экрана Где я ошибаюсь или что мне не хватает?