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:
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.