1
下面定期加載數據表是我的代碼：通過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