下面定期加载数据表是我的代码:通过Ajax调用
(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);
}
})
}
});
})();
在UI方面我确实看到AJAX请求被定期进行,但问题是,数据表加载完美(宽/大小),仅第一次在浏览器中:
Show Search
XXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXX
Showing ... Prev/Next
第二次起,当AJAX响应接收到的数据表只是缩小:
Show Search
XXXXX XXXX XXXXX XXXX
Showing ... Prev/Next
请注意标签和数据是正确的,但它只是表被缩小 - 请帮助解决问题
在此先感谢。
==================================== UPDATE ========= =============================
我尝试下面的代码:
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请求发出时,我看不到“正在加载...”文本。下面是我的comeplete代码:
<!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>
中的页面通过以下网址从浏览器访问:
http://mybox.com/mon.html?data=test
谢谢我能够取得一些进展,但仍然无法达到预期的效果。请参阅原始问题.. == UPDATE == ..部分 – Prakash