JQuery AJAX DataTable Not Loading Standard Functions After Reload Data

Question

I have added DataTables to a table i am fetching data via AJAX, using PHP and SQL. On the very first load, after performing the first Search all is fine and everything works as intended. However when searching a second time, while all the code used to Search has been ran through again, the DataTable functionality seems to stop working.

I added some alerts into crucial parts in the DataTable file, and found after the first search, it never makes it back into the file.

I though maybe i need to "re-initialise" DataTable seeing as the entirety of the data contents has changed after my search again.

Spent a long time looking online, with a lot of suggestions being around Destroy and Clear etc. But nothing seems to work.

Here is my code, as you can see i have it set to do something different after the first search but not sure how to fix this, as the sorting, pagination, searching etc all dont work:

$.ajax({
    type:'POST',
    url:'/ITSMIS/data/asset/search.php',
    data:HardwareAsset,
    dataType: "html",
    success:function(data){

        LoadDataTableHeaders();

        var NotSearched = document.getElementById("no-search-default");
        var TableContainer = document.getElementById("data-table-container");
        var NoSearchResults = document.getElementById("no-search-results");

        if(NotSearched.style.display !== 'none'){
            $(NotSearched).hide();
        }
        if(data){
            if(TableContainer.style.display == 'none'){
                $(TableContainer).show();
            }
            $(NoSearchResults).hide();
            $('#data-table-results').html(data);

            $("input:checkbox:not(:checked)").each(function() {
                var DataTableColumn = "table ." + $(this).attr("name");
                $(DataTableColumn).remove();
            });

            if ( ! $.fn.DataTable.isDataTable( '#data-table' ) ) {
                $('#data-table').DataTable();
            }
            else{

            }
        }
        else{
            if(NoSearchResults.style.display == 'none'){
                $(TableContainer).hide();
                $(NoSearchResults).show();
            }   
        }
    }
})

If you are going to dump the data into the raw html table, you will need to invalidate and redraw all of the rows. DataTable does not know you are changing the underlying html — Bindrid
– Bindrid, Commented Jan 19, 2017 at 16:36

Bindrid · Accepted Answer · 2017-01-19 18:27:51Z

1

This should invalidate and redraw the table when it already exits.
(Added 'full-rest' parameter after I found this: https://datatables.net/reference/api/draw())

if (  $.fn.DataTable.isDataTable( '#data-table' ) ) {
     $('#data-table').DataTable().rows().invalidate().draw('full-reset');
 }
 else{
      $('#data-table').DataTable();
 }

edited Jan 19, 2017 at 18:27

answered Jan 19, 2017 at 16:46

Bindrid

3,7452 gold badges20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheTechnicalPaladin Over a year ago

Okay this seems to have fixed pagination, and the row count option, search also seems good. but sort still seems to not reload. Thanks a lot for the fix for the rest though! much appreciated.

Bindrid Over a year ago

You could always destroy and rebuild the table on each ajax call

Sebastianb · Accepted Answer · 2017-01-19 17:39:45Z

1

You could try simply re-initializing Datatables by calling

$('#data-table').DataTable({
    destroy: true
});

this option would allow Datatables to destroy the previous instance if it exists, and initialize as if it was the first time.

answered Jan 19, 2017 at 17:39

Sebastianb

2,06024 silver badges31 bronze badges

Collectives™ on Stack Overflow

JQuery AJAX DataTable Not Loading Standard Functions After Reload Data

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related