Bootstrap Datatable is no longer functioning after loading content via Ajax

Before some one says its a duplicate question, i know it is. I've just not been able to find anyone's script that looks similar to mine and as i'm completely new to JavaScript and JQuery (used to php) i don't really know what I'm doing.

My datatable worked perfectly having the data loaded using php (before the page had loaded) but now its loaded after the page load, the table has lost all of it's filtering and pagination.

Here is how my table is loaded.

<div class="table-responsive">
    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <?php echo $tableheader;?>
                <?php echo $tableheader;?>
        <tbody id="data"> <!--data will be inputed here-->


This is the script that gets the data and puts it into the table.

    //call ajax
    var ajax = new XMLHttpRequest ();
    var method = "GET";
    var url = "data_assets.php";
    var asynchronous = true;

    setInterval(function(){, url, asynchronous);
        //sending ajax request
    }, 250)

    //receiving response from data_assets.php
    ajax.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            //convert JSON back to array
            var data = JSON.parse(this.responseText);
            //console.log(data); //for debugging

            //html value for <tbody>
            var html ="";

            //looping through the data
            for (var a = 0; a < data.length; a++) {
                var asset_number = data[a].asset_number;
                var id = data[a].id;
                var room = data[a].room;
                var _location = data[a]._location;
                var sku = data[a].sku;
                var qty = data[a].qty;
                var _value = data[a]._value;
                var date = data[a].date;
                var po_number = data[a].po_number;
                var purchaced_from = data[a].purchaced_from;
                var notes = data[a].notes;
                var total = data[a].total;

                //storing in html
                html += "<tr>";
                    html += "<td style='vertical-align: middle;'>" + asset_number + "</td>";
                    html += "<td style='vertical-align: middle;'>" + id + "</td>";
                    html += "<td style='vertical-align: middle;'>" + room + "</td>";
                    html += "<td style='vertical-align: middle;'>" + _location + "</td>";
                    html += "<td style='vertical-align: middle;'>" + sku + "</td>";
                    html += "<td style='vertical-align: middle;'>" + qty + "</td>";
                    html += "<td style='vertical-align: middle;'>" + _value + "</td>";
                    html += "<td style='vertical-align: middle;'>" + total + "</td>";
                    html += "<td style='text-align: center; vertical-align: middle;'>" + date + "</td>";
                    html += "<td style='vertical-align: middle;'>" + po_number + "</td>";
                    html += "<td style='vertical-align: middle;'>" + purchaced_from + "</td>";
                    html += "<td style='vertical-align: middle;'>" + notes + "</td>";
                    html += "<td style='text-align: center; vertical-align: middle;'>";
                        html += "<a href='?id=" + id + "&room=" + room + "&asset=" + asset_number + "&location=" + _location + "&sku=" + sku + "&qty=" + qty + "&value=" + _value + "&date=" + date + "&po=" + po_number + "&where=" + purchaced_from + "&notes=" + notes + "#editModal' class=''><i class='far fa-edit fa-lg'></i></a>";
                    html += "</td>";
                    html += "<td style='text-align: center; vertical-align: middle;'>";
                        html += "<a href='?id=" + id + "&room=" + room + "&asset=" + asset_number + "&location=" + _location + "&sku=" + sku + "&qty=" + qty + "&value=" + _value + "&date=" + date + "&po=" + po_number + "&where=" + purchaced_from + "&notes=" + notes + "#duplicateModal' class=''><i class='far fa-clone fa-lg'></i></a>";
                    html += "</td>";
                html += "</tr>";

            //replacing the <tbody> 
            document.getElementById("data").innerHTML = html;

If anyone could show me how to get this working in my example it would be greatly appreciated, I really want to load all of my tables on this site like this so i dont need to have a refresh on saving data (This refreshes every 250ms so the data in the table is always up to date with the database).


Right i took out my 250ms refresh and now the table works perfectly! is anyone now able to help me with my next issue. How do i get the table to refresh when new data is entered into the database, without refreshing the whole page



I suggest creating the table structure in HTML or PHP (not Javascript). Then load the data into the table with ajax. Those DOM elements are not readily available to javascript unless the event to create the elements is bound to an element that already exists like body or document or some other parent element of the table.


I personally don't have much experience with DataTables plugin. So the plugin will automatically create your DOM elements (table structure) based on either the data object returned from ajax or by properties you specify. DataTables does use jQuery's ajax() method to make ajax calls however you should not override the success callback. There is a proper way to use their API when making ajax calls as specified in the documentation. There is also a proper way to reload data on an interval to refresh your tables.

Please check out this fiddle.

The ajax url, method, data properties must of course be updated to fit your application (this was the only way to simulate ajax call on jsFiddle. Please note you will have to have properly formatted JSON.


Did you tried to explicitly set pagelength property on Datatables?

$('#datatable').dataTable( {
  "pageLength": 50
} );


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.