201510 月16
jquery.datatables 使用方法:Ajax分页、字段排序、传递参数等

Html:
姓名状态是否在线操作
用户名
datatables初始化:
var datatable;
function initDatatable() {
datatable = $('.datatable').DataTable({
"processing": false,
"serverSide": true,
"select": true,
"ordering": true,
"language": {
"url": "/plugins/datatables/cn.json"
},
"preDrawCallback": function () {
sublime.closeLoadingbar($(".main-content"));
sublime.showLoadingbar($(".main-content"));
},
"drawCallback": function () {
sublime.closeLoadingbar($(".main-content"));
},
"ajax": {
"url": "/private/sys/user/data",
"type": "post",
"data": function (d) {
d.unitid = $('#unitid').val();
d.loginname=$('#loginname').val();
d.nickname=$('#nickname').val();
}
},
"order":[[0,"desc"]],
"columns": [
{"data": "loginname", "bSortable": true},
{"data": "nickname", "bSortable": true},
{"data": "disabled", "bSortable": true},
{"data": "online", "bSortable": true}
],
"columnDefs": [
{
"render": function (data, type, row) {
return 'html.....';
},
"targets": 4
},
{
"render": function (data, type, row) {
if (data) {
return '';
} else {
return '';
}
},
"targets": 3
},
{
"render": function (data, type, row) {
if (!data) {
return '';
} else {
return '';
}
},
"targets": 2
}
]
});
datatable.on('click', 'tr', function () {
$(this).toggleClass('selected');
});
$("#searchBtn").on('click',function(){
datatable.ajax.reload(null, false);
});
}
重新加载数据:
datatable.ajax.reload(null, false);//当前页 datatable.ajax.reload();//回到第一页
排序:通过后台参数 order数组得到dir:asc/desc,通过order的column下标,获取columns数组中的data字段名,两者结合写排序条件 后台把所有参数打印出来,你就知道代码应该怎么写了……over
响应的数据格式:
{
"draw": draw,
"recordsTotal": pageSize,
"recordsFiltered": count,
"data": list
}
Nodejs 后端完整代码:
data: function (req, res) {
var pageSize = parseInt(req.body.length);
var start = parseInt(req.body.start);
var page = start / pageSize + 1;
var draw = parseInt(req.body.draw);
var unitid = req.body.unitid || 1;
var loginname = req.body.loginname || '';
var nickname = req.body.nickname || '';
var order = req.body.order || [];
var columns = req.body.columns || [];
var sort = {};
var where = {unitid: unitid};
if (loginname) {
where.loginname = {'like':'%'+loginname+'%'};
}
if (nickname) {
where.nickname = {'like':'%'+nickname+'%'};
}
if (order.length > 0) {
sort[columns[order[0].column].data] = order[0].dir;
}
Sys_user.count(where).exec(function (err, count) {
if (!err && count > 0) {
Sys_user.find(where)
.sort(sort)
.paginate({page: page, limit: pageSize})
.exec(function (err, list) {
return res.json({
"draw": draw,
"recordsTotal": pageSize,
"recordsFiltered": count,
"data": list
});
});
} else {
return res.json({
"draw": draw,
"recordsTotal": pageSize,
"recordsFiltered": 0,
"data": []
});
}
});
},
本文地址:https://wizzer.cn/archives/3181 , 转载请保留.