考虑到多个页面都需要用到全选多选，可以将公共的部分抽出到js文件中，引用即可减少代码量。
首先：将公共部分抽出：
var table;
var selectAllFlag = true;
var pageFlag = false;
function deleteAll() {
$('#deleteAll').click(function() {
if (selectAllFlag) {
table.rows().select().data().toArray();
} else {
table.rows().deselect();
}
selectAllFlag = !selectAllFlag;
})
};
function deleteSelect() {
$('#deleteSelect').click(
function() {
var array = new Array();
array = table.rows({selected : true}).data().toArray();
if (array.length == 0) {
swal({
title : "批量删除失败",
text : "请先勾选需要删除的数据",
type : "error",
showConfirmButton : false,
timer : 2000
});
} else {
swal(
{
title : "删除账号",
text : "<span style='color:#F44336;'>删除操作后该记录将被删除，并且无法恢复</span>",
type : "info",
showCancelButton : true,
confirmButtonColor : "#2196F3",
confirmButtonText : "确定",
cancelButtonText : "取消",
closeOnConfirm : false,
html : true
}, function() {
for (var i = 0; i < array.length; i++) {
deleteCallback(array[i].id)
}
});
}
})
}
function buildTableConfigJson(operateCell) {
var configJson = {
"searching" : false,
"lengthChange" : false,
"pageLength" : 10,
ordering : false,
"serverSide" : true,
select : {
style : 'multi',
selector : 'td:first-child'
},
language : {
"lengthMenu" : "_MENU 条记录每页",
"zeroRecords" : "没有找到记录",
"info" : "记录数：_TOTAL_",
"infoEmpty" : "无记录",
"infoFiltered" : "（从 _MAX_ ）条记录过滤",
"paginate" : {
"previous" : "上一页",
"next" : "下一页"
}
},
ajax : {
dataSrc : 'data',
complete : function() {
if (!pageFlag) {
table.page('previous').draw('page');
}
}
},
drawCallback : function(settings) {
if (table.page() > 0 && table.data().length == 0) {
pageFlag = false;
} else {
pageFlag = true;
}
},
columnDefs: [
{
orderable : false,
className : 'select-checkbox',
targets : 0,
render : function(data, type, row) {
return '<input class="checkchild" type="checkbox"/>';
}
},
{
targets : -1,
render : operateCell,
}
]
};
return configJson;
}
取名page.js
放入项目文件中的js中，在需要的html页面用引用js
<script type="text/javascript" src="${request.contextPath}/js/page.js"></script>
<link rel="stylesheet" type="text/css" href="${request.contextPath}/library/datatables/dataTables.select.min.css"/>
<script type="text/javascript" src="${request.contextPath}/library/datatables/dataTables.select.min.js"></script>
page.js
然后在你所需要添加全选框的页面的js中修改代码
var table;
var searchFlag;
var pageFlag = false;
function closeDialog(){
$('#showUserDialog').modal('hide');
}
function searchRecord() {
searchFlag = true;
table.ajax.reload();
}
function reset() {
searchFlag = false;
$("#name").val("");
$("#groupIdSelect").val("");
table.ajax.reload();
}
function buildSearchParameters(data) {
var name=$("#name").val();
var groupId=$("#groupIdSelect").val();
if(name){
data.name=name;
}
if(groupId){
data.groupId=groupId;
}
}
function showUserDetail(id){
$.ajax({
url : contextPath + "/user/detail/"+id,
type : "get",
cache : false,
dataType : "html",
success : function(result) {
$("#modal-content").html(result);
},
complete : function(xhr, status){
forwardToLogin(xhr, status);
}
});
$('#showUserDialog').modal({
show : true,
backdrop : 'static'
});
}
function addUser() {
location.href=contextPath+"/user/add";
}
function updateUser(id) {
location.href=contextPath+"/user/update/"+id;
}
function deleteOperation(id) {
swal({
title : "删除账号",
text : "<span style='color:#F44336;'>删除操作后该记录将被删除，并且无法恢复</span>",
type : "info",
showCancelButton : true,
confirmButtonColor : "#2196F3",
confirmButtonText : "确定",
cancelButtonText : "取消",
closeOnConfirm : false,
html : true
}, function() {
deleteCallback(id);
});
}
function deleteCallback(id) {
$.ajax({
url : contextPath + "/user/delete/" + id,
cache : false,
dataType : "json",
success : function(result) {
if (result.code == 1) {
swal({
title : "删除账号",
text : "删除账号成功",
type : "success",
showConfirmButton : false,
timer : 1000
});
table.draw(false);// 刷新当前页
}
}
});
}
$(function() {
searchFlag = false;
var operateCell = function(data, type, row, meta) {
var html = '<button class="btn btn-sm btn-primary waves-effect" value="'
+ row.id
+ '" onclick="updateUser('
+ row.id
+ ')">编辑</button> '
+ '<button class="btn btn-sm btn-danger waves-effect" value="'
+ row.id
+ '" onclick="deleteOperation('
+ row.id + ')">删除</button>';
return html;
}
var configJson = buildTableConfigJson(operateCell);
var configAjaxJson = configJson.ajax;
configAjaxJson.url=contextPath + '/user/list';
configAjaxJson.data=function(data){
if (searchFlag) {
buildSearchParameters(data);
}
};
configJson.columns = [
{"data" : null},
{"data" : "name"},
{"data" : "mobile"},
{"data" : "position"},
{"data" : null}
],
table = $(".dataTable").DataTable(configJson)
deleteSelect();
deleteAll();
});
然后就是html页面
<!DOCTYPE html>
<html>
<head>
<#include "/commonPage.html" />
<script type="text/javascript" src="${request.contextPath}/js/user/main.js"></script>
</head>
<body class="theme-blue">
<#include "/header.html"/>
<#include "/menu.html"/>
<section class="content">
<div class="container-fluid">
<!--
<div class="block-header">
<h2>DASHBOARD</h2>
</div>
-->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
人员管理<small></small>
</h2>
</div>
<div class="body">
<button type="button" class="btn btn-danger waves-effect" id="deleteSelect"><i class="material-icons">delete</i> <span>批量删除</span></button>
<button type="button" class="btn btn-primary waves-effect"
onclick="addUser()">
<i class="material-icons">add</i> <span>添加人员</span>
</button>
<div class="pull-right" style="vertical-align: middle">
<label>姓名：
<input id="name" type="text" >
</label>
<label>部门：
<select id="groupIdSelect">
<option value="">请选择</option>
</select>
</label>
<a class="btn btn-info waves-effect" onclick="searchRecord()">搜索</a>
<a class="btn btn-default waves-effect" onclick="reset()">重置</a>
</div>
<table style="width:100%;"
class="table table-bordered table-striped table-hover js-basic-example dataTable">
<thead>
<tr>
<th class='th' style="text-align:center;vertical-align:middle">
<button type="button" class="btn btn-default waves-effect" id="deleteAll"><i class="material-icons">playlist_add_check</i></button>
<th>姓名</th>
<th>手机号码</th>
<th>职位</th>
<!-- <th>部门</th> -->
<th width="20%">操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <div class="modal fade" id="showUserDialog" tabindex="-1"
role="dialog">
<div class="modal-dialog" role="document"
style="margin-top: 10%; width: 800px;">
<div id="modal-content" class="modal-content">
111
</div>
</div>
</div> -->
</body>
</html>
主要是这一部分
image.png
image.png
以上的效果：
image.png
网友评论