2. html 代码
<table id="keeperUserList" class="display table table-striped table-bordered table-hover table-checkable">
<thead>
<span style="white-space:pre"> </span><tr>
<th>
<label class="mt-checkBox mt-checkBox-single mt-checkBox-outline">
<input type="checkBox" name="keeperUserGroup-checkable" class="group-checkable" data-set="#sample_1 .checkBoxes" />
<span></span>
</label>
</th>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">性别</th>
<th class="text-center">手机号码 </th>
<th class="text-center">所属门店 </th>
<th class="text-center">所属职位 </th>
<th class="text-center">账号状态</th>
<th class="text-center">注册时间 </th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
3. js 代码
/**
* 初始化列表
*/
function initKeeperUserListTable() {
keeperUserList = $('#keeperUserList').DataTable({
// ajax配置为function,手动调用异步查询
ajax : {
type: "GET",url: ctxFront + '/crm/keeper/account/list',// 传入已封装的参数
data: function(data){
data.page = data.start / data.length + 1;
data.limit = data.length;
// 右上角搜索
data.keyword = data.search.value;
data.version = CONSTANT.APISERVER.KEEPER;
delete data.columns;
},dataType: "json",dataSrc : function(result) {
// 后台不实现过滤功能，每次查询均视作全部结果
result.recordsTotal = result.data.totalCount;
result.recordsFiltered = result.data.totalCount || 0;
result.data = result.data.kavs || {};
delete result.data.totalCount;
delete result.data.kavs;
return result.data;
}
},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,targets : 0,width : "30px",render : function(data,type,row,Meta) {
// 显示行号
var startIndex = Meta.settings._iDisplayStart;
return startIndex + Meta.row + 1;
}
},{
data : 'name',width : "130px",},{
data : 'passportv.sex',className : "text-center",Meta) {
return getKeeperUserSex(data);
}
},{
data : '.passportv.phone',width : "60px",Meta) {
data = data || "";
return '<span title="' + data + '">' + data + '</span>';
}
},{
data : 'storev.name',width : "70px",{
data : 'position',Meta) {
return getKeeperUserPosition(data);
}
},{
data : 'status',Meta) {
return getKeeperUserStatus(data);
}
},{
data : 'creationDate',Meta) {
return dateForamtToString(data,'yyyy-MM-dd hh:mm:ss');
}
},{
data : 'operate',visible : true,width : '200px',full) {
if (!full.passportv) {
return '';
}
var edit = '<button onclick="editKeeperUserInfo(' + full.passportv.id + ')" class="btn btn-sm green btn-outline filter-submit margin-bottom">修改</button>';
var del = '<button onclick="deleteKeeperUser(' + full.passportv.id + ');" class="btn btn-sm red btn-outline filter-cancel">删除</button>';
var stop = '<button onclick="stopKeeperUser(' + full.passportv.id + ');" class="btn btn-sm red btn-outline filter-cancel">冻结</button>';
var unseal = '<button onclick="unsealKeeperUser(' + full.passportv.id + ');" class="btn btn-sm red btn-outline filter-cancel">解冻</button>';
var detail = '<a target="_blank" href="' + ctxFront + '/crm/keeper/account/info?id=' + full.passportv.id + '" class="btn btn-sm purple btn-outline filter-cancel">详情</a>';
var result = edit;
if(full.status == 0){
result += stop + del + detail;
}else if(full.status == 1){
result += unseal + del + detail;
}
return result;
}
}
],drawCallback : function() {
// 取消全选
$(":checkBox[name='keeperUserGroup-checkable']").prop('checked',false);
},createdRow : function(row,data,dataIndex) {
if (data.status == 1) {
// 已冻结
$(row.children[7]).addClass('danger');
} else if (data.status == 2) {
// 已停用
$(row.children[7]).addClass('warning');
} else if (data.status == 3) {
// 已注销
$(row.children[7]).addClass('error');
}
},buttons : [
{
text : '<li class="fa fa-plus"></li> 新增',titleAttr : '新增管家账号',className : "btn green",action: function ( e,dt,node,config ) {
keeperUserIsupdate = false;
clearKeeperUserFormData();
// 重置form校验
FormValidation.resetForm();
$('#editKeeperUserWin .modal-title').text('新增管家信息');
$('#editKeeperUserWin').modal('show');
}
},{
text : '<li class="fa fa-search"></li> 搜索',titleAttr : '按条件搜索',className : "btn btn-sm green btn-outline filter-submit margin-bottom",config ) {
$('#queryKeeperUserWin').modal({
show : true
});
}
},{
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",function() {
// 因为 scrollX : true 为true加了滚动条，表头和表体成了两个表格，这个可以查看代码就知道
$('#keeperUserList_wrapper').on("change",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;
data.version = CONSTANT.APISERVER.KEEPER;
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();
});
}
/**
* 搜索 这个搜索解决datatable自定义搜索
*/
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 ($('#queryKeeperUserPosition').val() != '') {
params.position = $('#queryKeeperUserPosition').val();
}
if ($('#queryKeeperUserOrderBy').val()) {
params.orderBy = $('#queryKeeperUserOrderBy').val();
}
keeperUserList.settings()[0].ajax.data = params;
keeperUserList.ajax.reload();
$('#queryKeeperUserWin').modal('hide');
}
变量js
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 : "搜索:",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,data : "id",Meta) {
var content = '<label class="mt-checkBox mt-checkBox-single mt-checkBox-outline">';
content += ' <input type="checkBox" class="group-checkable" value="' + data + '" />';
content += ' <span></span>';
content += '</label>';
return content;
}
}
},// 常用render可以抽取出来，如日期时间、头像等
RENDER : {
ELLIPSIS : function(data,Meta) {
data = data || "";
return '<span title="' + data + '">' + data + '</span>';
}
}
}
}; 原文链接：https://www.f2er.com/ajax/161910.html