Periodically Load DataTables via an AJAX Call

Question

Below is my code:

(function worker() {
oTable = $('#example').dataTable({"iDisplayLength" : 25, "sAjaxSource": "/getservicevers/?value=" + QueryString.stage ,"bDestroy" : true ,  "fnServerData" :
                function ( sSource, aoData, fnCallback ) {
                        $.ajax( {
                                 "dataType": 'json',
                                "type": "GET",
                                "url": sSource,
                                "async":false,
                                "success": function (json)
                                {
                                        fnCallback(json);
                                },
                                complete: function() {
                                setTimeout(worker, 5000);
                                }
                        })
                }
                });
        })();

In the UI side I do see AJAX request being made periodically but issue is that the DataTables load perfectly (width/size) first time only in the browser:

Show                                                                                                                                                                                                 Search

XXXXXX                                          XXXXXXXXXXXXX                             XXXXXXXXXXXX                                XXXXXXXXXXXXXX


Showing ...                                                                                                                                                                                        Prev / Next

Second time onwards when AJAX response is received the DataTables just shrinks:

Show                                                                                                                                                                                                 Search

                                                                                  XXXXX    XXXX  XXXXX    XXXX


Showing ...                                                                                                                                                                                        Prev / Next

Note the labels and data are correct but it just that the tables gets shrinked - please help to resolve the issue

Thanks in advance.

====================================UPDATE======================================

I tried the below code:

oTable = $('#example').dataTable();
(function worker() {
                        $.ajax( {
                                "dataType": 'json',
                                "type": "GET",
                                "url": "/getservicevers/?data=" + QueryString.data,
                                "async":false,
                                "success": function (data)
                                {
                                        alert("myObject is " + data.toSource());
                                        alert(data.aaData[0][0]);
                                        oTable.fnClearTable();
                                        for(var i = 0; i < data.length; i++) {
                                            oTable.fnAddData([
                                                data.aaData[i][0],
                                                data.aaData[i][1],
                                                data.aaData[i][2]
                                        ]);
                                }
                                },
                                complete: function() {
                                        oTable.fnDraw();
                                        setTimeout(worker, 5000);
                                }
                });
        })();

The ourput of first two alert statements in success method of AJAX call are:

myObject is ({iTotalRecords:1, iTotalDisplayRecords:1, aaData:[[" data1", " data2", " data3"]]})
data1

The code works fine but in the page I do not see any data in datatables rather:

Show                                                                                                                                                                                                 Search

    XXXXXX                                          XXXXXXXXXXXXX                             XXXXXXXXXXXX                                XXXXXXXXXXXXXX

                                         No data available in table    
    Showing ...                                                                                        

What I need to further on to resolve this and note that I am not see the "Loading ..." text when the AJAX request is made. Below is my comeplete code:

<!DOCTYPE html>
<html>

<head>
        <title>My Details</title>
        <meta charset='UTF-8' />
        <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
        <script>
        $(document).ready(function() {
        var QueryString = function () {
                                                  var query_string = {};
                                                  var query = window.location.search.substring(1);
                                                  var vars = query.split("&");
                                                  for (var i=0;i<vars.length;i++) {
                                                    var pair = vars[i].split("=");
                                                    if (typeof query_string[pair[0]] === "undefined") {
                                                      query_string[pair[0]] = pair[1];
                                                    } else if (typeof query_string[pair[0]] === "string") {
                                                      var arr = [ query_string[pair[0]], pair[1] ];
                                                      query_string[pair[0]] = arr;
                                                    } else {
                                                      query_string[pair[0]].push(pair[1]);
                                                    }
                                                  }
                                                    return query_string;
                                          } ();
        /* Add the events etc before DataTables hides a column */
        $("thead input").keyup( function () {
                /* Filter on the column (the index) of this element */
                oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
                        oTable.fnSettings(), $("thead input").index(this) ) );
        } );

        /*
         * Support functions to provide a little bit of 'user friendlyness' to the textboxes
         */
        $("thead input").each( function (i) {
                this.initVal = this.value;
        } );

        $("thead input").focus( function () {
                if ( this.className == "search" )
                {
                        this.className = "";
                        this.value = "";
                }
        } );

        $("thead input").blur( function (i) {
                if ( this.value == "" )
                {
                        this.className = "search";
                        this.value = this.initVal;
                }
        } );
        oTable = $('#example').dataTable();
        (function worker() {
                                $.ajax( {
                                        "dataType": 'json',
                                        "type": "GET",
                                        "url": "/getservicevers/?data=" + QueryString.data,
                                        "async":false,
                                        "success": function (data)
                                        {
                                                alert("myObject is " + data.toSource());
                                                alert(data.aaData[0][0]);
                                                oTable.fnClearTable();
                                                for(var i = 0; i < data.length; i++) {
                                                    oTable.fnAddData([
                                                        data.aaData[i][0],
                                                        data.aaData[i][1],
                                                        data.aaData[i][2]
                                                ]);
                                        }
                                        },
                                        complete: function() {
                                                oTable.fnDraw();
                                                setTimeout(worker, 5000);
                                        }
                        });
                })();
                } );
        </script>
</head>
<body>
        <table id="example">
        <thead>
                <tr>
                        <th>Data1</th>
                        <th>Data2</th>
                        <th>Data3</th>
                </tr>
        </thead>
        <tfoot>
                <tr>
                        <th>Data1</th>
                        <th>Data2</th>
                        <th>Data3</th>
                </tr>
        </tfoot>
        <tbody>
        </tbody>
        </table>
</body>

</html>

The page in accessed from browser by following URL:

http://mybox.com/mon.html?data=test

Answer 1

Your function looks pretty simple, so I'm wondering if this is a graphical glitch caused by the browser. Adding an oTable.fnDraw(); might do the trick.

Alternatively, if your AJAX call is returning the entire dataset, you can clear the table first with a oTable.fnClearTable(); and change the way you're adding data into the table by looping over DataTable's .fnAddData() method.

$.ajax({
    url: '/getservicevers/?value=" + QueryString.stage',
    type: 'post',
    data: data, // this would be an array
    success: function(data) {
        oTable.fnClearTable();
        // populate the table with data
        for(var i = 0; i < data.length; i++) {
            oTable.fnAddData([
                data[i].column1,
                data[i].column2,
                data[i].column3
            ]);
        }
    }
});