一、首先展示效果图
效果图
开始之前先导包！
第一步：先写html
//在你需要添加按钮的地方加上这两个按钮
全选
批量删除
//这行就是留位置，下面的根据各自项目需要添加编号区域位置类型关联操作
第二步：写js文件
$(function() {
searchFlag = false;
table = $(".dataTable")
.DataTable(
{
"searching" : false,
"lengthChange" : false,
"pageLength" : 10,
ordering : false,
"serverSide" : true,
ajax : {
url : contextPath + '/mapPoint/list',
dataSrc : 'data',
data : function(data) {
if (searchFlag) {
buildSearchParameters(data);
}
}
},
columns : [ {
"data" : null
}, {
"data" : "id"
}, {
"data" : "region"
}, {
"data" : "position"
}, {
"data" : "type"
}, {
"data" : "relationName"
}, {
"data" : null
} ],
columnDefs : [
{//这个就是用来画第一列的小方块多选框的
orderable : false,
className : 'select-checkbox',
targets : 0
},
{
targets : -1,
render : function(data, type, row, meta) {
var html = '编辑 '
;
return html;
}
},
{
targets : 0,//代表第0行
searchable : false,
orderable : false,
className : 'dt-body-center',
render : function(data, type, row) {
return '';
}
} ],
select : {
style : 'multi',
selector : 'td:first-child'
},
language : {
"lengthMenu" : "_MENU 条记录每页",
"zeroRecords" : "没有找到记录",
"info" : "记录数：_TOTAL_",
"infoEmpty" : "无记录",
"infoFiltered" : "(从 _MAX_ )条记录过滤",
"paginate" : {
"previous" : "上一页",
"next" : "下一页"
}
}
})
$('#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 : "删除操作后该记录将被删除，并且无法恢复",
type : "info",
showCancelButton : true,
confirmButtonColor : "#2196F3",
confirmButtonText : "确定",
cancelButtonText : "取消",
closeOnConfirm : false,
html : true
}, function() {
for (var i = 0; i < array.length; i++) {
deleteMapPoint(array[i].id)//确定删除，则执行删除函数
}
});
}
})
$('#deleteAll').click(function() {//全选
flag++;
if(flag%2==0){
table.rows().select().data().toArray();
}else{
table.rows().deselect();
}
})
});
第三步：写js文件中的deleteMapPoint函数
function deleteMapPoint(id) {
$.ajax({
url : contextPath + "/mapPoint/delete/" + id,
cache : false,
dataType : "json",
success : function(result) {
if (result.code == 1) {
swal({
title : "删除账号",
text : "删除账号成功",
type : "success",
showConfirmButton : false,
timer : 1000
});
table.ajax.reload();
}
}
});
}
应该没啦。完工~