Ниже мой код:
(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);
}
})
}
});
})();
На стороне пользовательского интерфейса я вижу периодический запрос AJAX, но проблема в том, что таблицы данных отлично загружаются (ширина/размер) в первый раз только в браузере:
Show Search
XXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXX
Showing ... Prev / Next
Во второй раз, когда получен ответ AJAX, DataTables просто сжимается:
Show Search
XXXXX XXXX XXXXX XXXX
Showing ... Prev / Next
Обратите внимание, что метки и данные верны, но таблицы просто сжимаются - пожалуйста, помогите решить проблему.
Заранее спасибо.
===================================ОБНОВЛЕНИЕ============= ==========================
Я попробовал следующий код:
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);
}
});
})();
Наши первые два оператора предупреждения в методе успеха вызова AJAX:
myObject is ({iTotalRecords:1, iTotalDisplayRecords:1, aaData:[[" data1", " data2", " data3"]]})
data1
Код работает нормально, но на странице я не вижу данных в таблицах данных:
Show Search
XXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXX
No data available in table
Showing ...
Что мне нужно для дальнейшего решения этой проблемы, и обратите внимание, что я не вижу текст «Загрузка ...» при выполнении запроса AJAX. Ниже приведен мой полный код:
<!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>
Страница доступна из браузера по следующему URL:
