DataTables not recognizing update to table from a non-DT ajax call.

DataTables not recognizing update to table from a non-DT ajax call.

Clay_NomadClay_Nomad Posts: 1Questions: 1Answers: 0
edited March 2015 in Free community support

Hello.

I am using an ajax call to return a table, and I would like DT to do its magic upon that table.

Unfortunately, while the table prints out fine, DT never "sees" it. I thought it was because the $('#the_table').DataTable() was occurring at $(document).ready before the table was actually there, so I stuck in a dummy table with the right ID and overwrite it when I get my ajax result. I still don't see any DataTables output.

I tried putting the DataTables declaration inside the ajax success, but still nothing.

I know I have DT linked correctly to the page because when I use a simple html page with a hardcoded table I see DT take over. In this test document, My script was simply:

<script>$(document).ready(function(){
$('#contentTable').dataTable();})</script>

My backend PHP file won't work without local access to my db, but it just echo's a giant string containing the html for the filled out table, including the table tags and the id "contentTable".

<input type="submit" class="button" id="button_get_all_records" value="Display all records for this fleet."/>
<div id="table_goes_here"></div>

My index.php has this at the top:

$(document).ready(function(){
    $('#button_get_all_records').click(function(){
        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: "<three jquery dropdown box selector.val()s in the form thing1=blah,thing2=durr,thing3=foo"
            success: function(msg){    //RETURNS A COMPLETE TABLE
                $('#table_goes_here').html(msg);
                $('#contentTable').dataTable();
            }
        });
    }); 
}); 

If I can get this working, I hope to add back in the colVis, colReorder, and tableTools sections that I had working on a hardcoded table.

This discussion has been closed.