CSS lost after reloading table

toonces

Hi all. I have a simple div with a datatable in it. i also have a button that when clicked, uses AJAX to call a php file that returns a new version of that table. But when the new version comes back, it has been stripped of the Datatables formatting.

I have this :

    var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("myDiv").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "loadTable.php?ref=" + myRef, true);
        xmlhttp.send();

which successfully pulls in a new version of my table, but disconnects it from being a proper Datatable.
and then i have a table similar to this being loaded in~~~~ :

<table width="100%" border="1px" class="cell-border" id="example" style="width:100%; font-size:21px">
        <thead>
            <tr>
                <th width="9%" style="font-size:18px; visibility:hidden" >&nbsp;</th>
                <th width="5%" style="font-size:18px" >#</th>
                <th width="68%" style="font-size:18px" >Item</th>
                <th width="9%" style="font-size:18px" >Price</th>
                <th width="9%" style="font-size:18px">Total</th>
            </tr>
        </thead>
        <tbody>
             <tr>
                <td>1</td>
                <td>233</td>
                <td>Some Text</td>
                <td>899</td>
                <td>899</td>
             </tr>
             <tr>
                <td>2</td>
                <td>554</td>
                <td>Some Other Text</td>
                <td>905</td>
                <td>905</td>
             </tr>
  </tbody>
  </table>

I've researched it and seen that it's a common occurrence, and that I somehow need to re bind the datatables handling to the new table. But everything I've seen recommended for others doesn't work for me.

Can someone point me in the right way toward a simple way to make the new table i've loaded in behave correctly?

kthorngren

document.getElementById("myDiv").innerHTML = this.responseText;

Is this overwriting the HTML table? If so then you will need to reinitialize the Datatable afterwards. You will likely need to use the destroy option or maybe the destroy() API before sending the XMLHttpRequest.

An easier approach, If you can fetch JSON data for the table, is to use the ajax option to initially fetch the data. Here is an example. Then you can use ajax.reload() to fetch the updated table.

Kevin

toonces

Hi Kevin, thanks for your comment. Yes it is overwriting the HTML. Unfortunately for this particular table, using server side processing is not an option in this case. I have come across other people suggesting the destroy option, but i'm not sure how to do that, and if there are additional steps I need to do (ie some sort of re-initialization?)

colin

Hi @toonces ,

As Kevin said, you can reinitialise, this should work.

        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("myDiv").innerHTML = this.responseText;
            $('SELECTOR_FOR_YOUR_TABLE').DataTables({destroy:true});
        }

If you used other initialisation options, you would need to add those alongside destroy .

Cheers,

Colin