我正在尝试使用Node.js分页Datatable。这是我的代码HTML
<button id="btnSearch" type="submit" class="btn btn-responsive"><i class="icon-search"></i> Search</button>
<div class="box-body table-responsive no-padding">
<div id="tableContainer">
<table class="table table-hover" id="dataTables1">
<thead>
<tr>
<th class="text-left">base</th>
<th class="text-left">base1</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="text-center">
<img id="loading-image" src="../dist/img/loading_spinner.gif" style="display: none;" />
</div>
</div>
这是脚本代码
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$("#btnSearch").click(function () {
RefreshTable("#dataTables1");
});
function buildAjaxSourcUrl() {
var orgURL = '?schemename=abc';
if (orgURL.length > 1) {
orgURL = 'http://127.0.0.1:3000/statistic' + orgURL;
} else {
orgURL = 'http://127.0.0.1:3000/statistic';
}
return orgURL;
}
function RefreshTable(tableId) {
var urlData = buildAjaxSourcUrl();
table = $(tableId).dataTable();
table._fnClearTable(table.oSettings);
table.fnDestroy();
table.fnDraw(true);
var table2 = $(tableId).dataTable({
"bServerSide": true,
"bProcessing": true,
"responsive": true,
"bDestroy": true,
"bAutoWidth": false,
oLanguage: {
sProcessing: "<img src='../dist/img/loading_spinner.gif'/>"
},
"aLengthMenu": [2, 30, 50, 100],
"pageLength": 2,
"sAjaxDataProp": "data",
"sAjaxSource": urlData,
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
"sPaginationType": "full_numbers",//"full_numbers",
"columns": [
{ "data": "base1" },
{ "data": "base2" }
]
});
}
</script>
这是我的代码服务器端节点js
exports.test = function(req, res) {
console.log("test");
var start = req.body.iDisplayStart;
var pageSize = req.body.iDisplayLength;
ManagerExport.getTotalUser(function(count){
ManagerExport.getUser(start, pageSize, function(Users) {
var response = {
draw: 2,
recordsTotal: count[0].count,
recordsFiltered: count[0].count,
data: Users
};
console.log(response);
res.send(response);
});
});
}
在视图中,当我点击按钮搜索时,我得到2条用户记录 之后我点击按钮索引2然后页面停留在处理上,请建议我解决方案来解决这个问题。感谢冒险
答案 0 :(得分:0)
当bProcessing为true(您在构造函数中指定为datatable)时,将显示该处理图像。在ajax调用返回后,您可以尝试将值设置为false,以使其消失。
答案 1 :(得分:0)
确保在返回datatable之前将draw param转换为int, 并根据datatable发送的参数返回draw参数。
def data=['draw':Integer.parseInt(params.draW),...]
return data as JSON