datatables 添加复选框及序号列及使用ajax请求
1.页面引入样式 和 js 文件
2. html 代码
序号
姓名
昵称
性别
手机号码
账号状态
注册时间
操作
3. js 代码
/**
* 初始化列表
*/
function initKeeperUserListTable() {
keeperUserList = $('#keeperUserList').DataTable({
// ajax配置为function,手动调用异步查询
ajax : {
type: "GET",
url: '/user/list',
// 传入已封装的参数
data: function(data){
data.page = data.start / data.length + 1;
data.limit = data.length;
// 右上角搜索
data.keyword = data.search.value;
delete data.search;
delete data.columns;
},
dataType: "json",
dataSrc : function(result) {
// 后台不实现过滤功能，每次查询均视作全部结果
if (result.ret != 0) {
bootboxAlert({message : '获取数据失败：' + result.msg});
}
result.data.rhavs = result.data.rhavs || {};
result.recordsTotal = result.data.totalCount || 0;
result.recordsFiltered = result.data.totalCount || 0;
result.data = result.data.rhavs || [];
delete result.data.totalCount;
delete result.data.rhavs;
return result.data;
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
bootboxAlert({
message : '获取列表失败：' + getAjaxErrorResponseContent(XMLHttpRequest, textStatus, errorThrown)
});
}
},
scrollX : true,
// 每次对 datatable 进行操作时也是请求后台
serverSide : true,
// 加载状态
processing : true,
// 默认排序查询,为空则表示取消默认排序否则复选框一列会出现小箭头
order: [],
// 分页,默认打开
paging : true,
// 是否禁用原生搜索
searching: true,
language : CONSTANT.DATA_TABLES.DEFAULT_OPTION.LANGUAGE,
columns : [
CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
{
data : null,
bSortable : false,
className : "text-right",
width : "30px",
render : function(data, type, row, meta) {
// 显示行号
var startIndex = meta.settings._iDisplayStart;
return startIndex + meta.row + 1;
}
}, {
data : 'rne',
bSortable : false,
width : "130px",
render : CONSTANT.DATA_TABLES.RENDER.ELLIPSIS
}, {
data : 'name',
bSortable : false,
width : "130px",
render : CONSTANT.DATA_TABLES.RENDER.ELLIPSIS
}, {
data : 'passportv.sex',
bSortable : false,
width : "30px",
className : "text-center",
render : function(data, type, row, meta) {
if (data == 1) {
return '';
} else if (data == 2) {
return '';
} else {
return '';
}
}
}, {
data : 'passportv.phone',
bSortable : false,
width : "60px",
className : "text-center",
render : CONSTANT.DATA_TABLES.RENDER.ELLIPSIS
}, {
data : 'status',
bSortable : false,
width : "60px",
className : "text-center",
render : function(data, type, row, meta) {
return getKeeperUserStatus(data);
}
}, {
data : 'cdate',
bSortable : false,
width : "130px",
className : "text-center",
render : function(data, type, row, meta) {
return dateForamtToString(data, 'yyyy-MM-dd hh:mm:ss');
}
}, {
data : 'operate',
bSortable : false,
visible : true,
width : '200px',
render : function(data, type, full) {
var edit = '';
var detail = '详情';
return edit + detail;
}
}
],
drawCallback : function(settings) {
// 取消全选
$(":checkbox[name='keeperUserGroup-checkable']").prop('checked', false);
// 高亮显示当前行
$(settings.nTable).find("tbody tr").click(function(e) {
$(e.target).parents('table').find('tr').removeClass('warning');
$(e.target).parents('tr').addClass('warning');
});
},
createdRow : function(row, data, dataIndex) {
if (data.status == 1) {
// 已冻结
$(row.children[5]).addClass('danger');
} else if (data.status == 2) {
// 已停用
$(row.children[5]).addClass('warning');
} else if (data.status == 3) {
// 已注销
$(row.children[5]).addClass('error');
}
},
buttons : [
{
text : ' 新增',
titleAttr : '新增管家账号',
className : "btn green",
action: function ( e, dt, node, config ) {
}
}, {
text : ' 搜索',
titleAttr : '按条件搜索',
className : "btn btn-sm green btn-outline filter-submit margin-bottom",
action: function ( e, dt, node, config ) {
}
}, {
extend : "print",
className : "btn dark btn-outline"
}, {
extend : "pdf",
className : "btn green btn-outline"
}, {
extend : "excel",
className : "btn yellow btn-outline"
}
],
//dom:"<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
});
// 如果 scrollX : true 使用这个$('#keeperUserList_wrapper').on("change", ":checkbox", function() {
// 如果 scrollX : false $('#keeperUserList').on("change", ":checkbox", function() {
// 因为 scrollX : true 为true加了滚动条，表头和表体成了两个表格，这个可以查看代码就知道
$('#keeperUserList_wrapper').on("change", ":checkbox", function() {
// 列表复选框
if ($(this).is("[name='keeperUserGroup-checkable']")) {
// 全选
$(":checkbox", '#keeperUserList').prop("checked",$(this).prop("checked"));
}else{
// 一般复选
var checkbox = $("tbody :checkbox", '#keeperUserList');
$(":checkbox[name='cb-check-all']", '#keeperUserList').prop('checked', checkbox.length == checkbox.filter(':checked').length);
}
}).on('preXhr.dt', function(e, settings, data) {
// ajax 请求之前事件
data.page = data.start / data.length + 1;
data.limit = data.length;
delete data.start;
delete data.order;
delete data.search;
delete data.length;
delete data.columns;
});
// 搜索框事件
$('#keeperUserList_filter input').unbind().keyup(function() {
var params = {};
if ($(this).val().trim()) {
params.keyword = $(this).val().trim();
}
keeperUserList.settings()[0].ajax.data = params;
keeperUserList.ajax.reload();
});
}
/**
* 搜索
*/
function queryKeeperUserList() {
// 添加参数
var params = {};
if ($('#queryKeeperUserName').val()) {
params.name = $('#queryKeeperUserName').val();
}
if ($('#queryKeeperUserPhone').val()) {
params.phone = $('#queryKeeperUserPhone').val();
}
if ($('#queryKeeperUserStatus').val() != '') {
params.status = $('#queryKeeperUserStatus').val();
}
if ($('#queryKeeperUserOrderBy').val()) {
params.orderBy = $('#queryKeeperUserOrderBy').val();
}
keeperUserList.settings()[0].ajax.data = params;
keeperUserList.ajax.reload();
$('#queryKeeperUserWin').modal('hide');
}var CONSTANT = {
// datatables常量
DATA_TABLES : {
DEFAULT_OPTION : { // DataTables初始化选项
LANGUAGE : {
sProcessing : "处理中...",
sLengthMenu : "显示 _MENU_ 项结果",
sZeroRecords : "没有匹配结果",
sInfo : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
sInfoEmpty : "显示第 0 至 0 项结果，共 0 项",
sInfoFiltered : "(由 _MAX_ 项结果过滤)",
sInfoPostFix : "",
sSearch : "搜索:",
searchPlaceholder : "关键字搜索",
sUrl : "",
sEmptyTable : "表中数据为空",
sLoadingRecords : "载入中...",
sInfoThousands : ",",
oPaginate : {
sFirst : "首页",
sPrevious : "上页",
sNext : "下页",
sLast : "末页"
},
oAria : {
sSortAscending : ": 以升序排列此列",
sSortDescending : ": 以降序排列此列"
}
},
// 禁用自动调整列宽
autoWidth : false,
// 为奇偶行加上样式，兼容不支持CSS伪类的场合
stripeClasses : [ "odd", "even" ],
// 取消默认排序查询,否则复选框一列会出现小箭头
order : [],
// 隐藏加载提示,自行处理
processing : false,
// 启用服务器端分页
serverSide : true,
// 禁用原生搜索
searching : false
},
COLUMN : {
// 复选框单元格
CHECKBOX : {
className: "td-checkbox",
orderable : false,
bSortable : false,
data : "id",
width : '30px',
render : function(data, type, row, meta) {
var content = '';
return content;
}
}
},
// 回调
CALLBACKS : {
// 表格绘制前的回调函数
PREDRAWCALLBACK : function(settings) {
if (settings.oInit.scrollX == '100%') {
// 给表格添加css类，处理scrollX : true出现边框问题
$(settings.nTableWrapper).addClass('dataTables_DTS');
}
},
INITCOMPLETE : function(settings, json) {
if (settings.oInit.scrollX == '100%' && $(settings.nTable).parent().innerWidth() - $(settings.nTable).outerWidth() > 5) {
$(settings.nScrollHead).children().width('100%');
$(settings.nTHead).parent().width('100%');
$(settings.nTable).width('100%');
}
},
// 表格每次重绘回调函数
DRAWCALLBACK : function(settings) {
if ($(settings.aoHeader[0][0].cell).find(':checkbox').length > 0) {
// 取消全选
$(settings.aoHeader[0][0].cell).find(':checkbox').prop('checked', false);
}
// 高亮显示当前行
$(settings.nTable).find("tbody tr").click(function(e) {
$(e.target).parents('table').find('tr').removeClass('warning');
$(e.target).parents('tr').addClass('warning');
});
}
},
// 常用render可以抽取出来，如日期时间、头像等
RENDER : {
ELLIPSIS : function(data, type, row, meta) {
data = data || "";
return '' + data + '';
}
}
}
};
if ($.fn.dataTable) {
$.extend($.fn.dataTable.defaults, {
processing : true,
order: [],
paging : true,
searching: true,
language : CONSTANT.DATA_TABLES.DEFAULT_OPTION.LANGUAGE,
preDrawCallback : CONSTANT.DATA_TABLES.CALLBACKS.PREDRAWCALLBACK,
initComplete : CONSTANT.DATA_TABLES.CALLBACKS.INITCOMPLETE,
drawCallback : CONSTANT.DATA_TABLES.CALLBACKS.DRAWCALLBACK
});
}