Passing new data to DataTables after a filter.

Tharamis

I have an existing Table that is using a bunch of check-boxes for filters. The table has grown in size to 4000+ entry's and I wanted to put pagination and search into the table.

I am able to get the the initial load to function correctly but after a filter is applied and the data is sent to my backend and back I can't get datatables to acknowledge the new row count/data. I tried destroying the table (example below) and re-initializing which works in terms of loading pagination and search after the table reloads but it's still holding the original 4000+ data not the new data.

I know this is easy and ill admit it's been a very long weekend and my brain is not functioning correctly. lol

Anyone have a quick easy solution for this... I also know my approach is just a hack as well as I am pretty sure their are API call's that would do this easily...

Anyway any help would be appreciated... will tip with a beer if I can. ;)

Initial table:

<table class="table table-bordered table-hover" width="100%" id="store_list">
    <thead>
        <tr>
            <th class="col text-center">Number</th>
            <th class="col">Store Name</th>
            <th class="col hidden-350">Area</th>
            <th class="col hidden-480">Scope</th>
            <th class="col hidden-480">Estimate</th>
            <th class="col hidden-480 text-center">Priority</th>
        </tr>
    </thead>
    <tbody>
    <?
    foreach($needs_list as $need_info){
    echo '
    <tr>
        <td class="text-center">'.$need_info['number'].'</a></td>
        <td>'.$need_info['name'].'</td>
        <td class="hidden-350">'.$need_info['area'].'</td>
        <td class="hidden-480">'.$need_info['scope'].'</td>
        <td class="hidden-480">'.$need_info['est'].'</td>
        <td class="text-center">'.$need_info['priority'].'</td>
    </tr>';
    }
    ?>
    </tbody>
</table>

Initial DataTables initialization

        $('#store_list').dataTable( {
          "columns": [
            { "data": "number" },
            { "data": "name" },
            { "data": "area" },
            { "data": "scope" },
            { "data": "est" },
            { "data": "priority" }
          ]
        } );

My jquery for fetching my data and my attempt at re-initializing the table with the new data.

        function jsonList() {
            var store_count = 0;
            var table = $('#store_list').DataTable();
            $('#store_list tbody').empty();
            $('#store_list tbody:last').append('<tr><td align="center" colspan="7"><img src="/rft/assets/img/loading.gif" /></tr>');
            $('input:checkbox').attr('disabled', 'disabled');
            //pass string to url and query database return json and build table
            $.getJSON('json_store_list.php?' + window.location.hash.replace('#', ''), function(json) {
                $('#store_list tbody').empty();
                $.each(json, function(store_line, store_array) {
                    $('#store_list tbody:last').append('<tr>' +
                        '<td class="text-center">' + store_array['number'] + '</a></td>' +
                        '<td>' + store_array['name'] + '</td>' +
                        '<td class="hidden-350">' + store_array['area'] + '</td>' +
                        '<td class="hidden-480">' + store_array['scope'] + '</td>' +
                        '<td class="hidden-480">' + store_array['est'] + '</td>' +
                        '<td class="text-center">' + store_array['priority'] + '</td>' +
                        '</tr>');
                    store_count++;
                });
                $('input:checkbox').removeAttr('disabled');
                $('#store_count').html(store_count + '');
                
                table.destroy();
                $('#store_list').dataTable( {
                  "columns": [
                    { "data": "number" },
                    { "data": "name" },
                    { "data": "area" },
                    { "data": "scope" },
                    { "data": "est" },
                    { "data": "priority" }]
                });
            });
        }