CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdatatables
Jonny P
Jonny P

Reputation: 453

Why does my HTML table lose bootstrap datatable attributes when it is refreshed with ajax?

I have a HTML table stored in table.html:

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
</table>

and another page which contains a div named "newtable" , an ajax script is used to get the contents of the table.html, inserts it into the div named "newtable" and refreshes it every 5 seconds. The table uses bootstrap data tables, this adds a search box and pagination function to my table:

<body>
<div class="content table-responsive table-full-width newtable">

</div>
</body>

    <script>
        function table() {
            $.ajax({
                url: 'table.html',
                type: 'get',
                success: function(response){
                    $('.newtable').html(response);
                }
            });
        }

                table();
        setInterval(table, 5000);

$(document).ready(function() {
    $('#example').DataTable();
} );


    </script>
</html>

When the page loads, my table works perfectly, however after ajax refreshes the table contents, the table updates however the bootstrap datatables functions (search bar and pagination) disappear, and don't re-appear unless i refresh the page myself.

How can i fix this issue?

Upvotes: 2

Views: 515

Answers (1)

Hawkings
Hawkings

Reputation: 533

When you call $('#example').DataTable(), it modifies the contents of the table to add all the functionality. However, since your ajax call is changing the table's inner HTML ($('.newtable').html(response)) all that content is lost. You can call DataTable() again after you load the new data:

success: function(response){
    $('.newtable').html(response);
    $('.newtable').DataTable();
}

Upvotes: 3

Related Questions