整体架构是ssm接口编程
<script type="text/javascript" src="layer/2.4/layer.js"></script>
<script type="text/javascript" src="datatables/jquery.dataTables.min.js"></script>
基于layer的分页参考源码效果更佳
$('.table-sort').dataTable({
"aaSorting": [[ 1, "desc" ]],//默认第几个排序
"bStateSave": true,//状态保存
"pading":false,
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
{"orderable":false,"aTargets":[0,8]}// 不参与排序的列
]
});
<thead>
<tr class="text-c">
<th width="25"><input type="checkbox" id="Select" name="Select" value=""></th>
<th width="80">ID</th>
<th width="120" >标题</th>
<th width="80">分类</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody>
<c:forEach var='ar' items='${artTemplate}'>
<tr class="text-c">
<td><input type="checkbox" value="${ar.id}" name="id"></td>
<td>${ar.id}</td>
<td>${ar.fl}</td>
<td>${ar.ly}</td>
<td class="td-status"><span class="label label-success radius">已发布</span></td>
<td class="f-14 td-manage">
//单个删除
<a style="text-decoration:none" class="ml-5" href="detetArtcle?id=<c:out value='${ar.id}' /> title="删除"><i class="Hui-iconfont"> </i></a>
<a οnclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a>
</td>
</tr>
</c:forEach>
</tbody>
//批量删除
function datadel(){
layer.confirm('确认要删除吗?',function(index){
// 获取所有选中的checked框
var option = $(":checked");
var checkedId = "";
var boo=true;
//拼接除全选框外,所有选中的id,
for (var i = 0, len = option.length; i < len; i++) {
if (boo) {
if (option[i].id=='allSelect') {
boo=true;
}else {
boo=false;
checkedId += option[i].value;
}
}else{
checkedId += ","+option[i].value;
}
}
$.ajax({
type: "post",
url:'doarticleDelete',
data : {
"checkedId":checkedId
},
dataType:"json",
success : function(map) {
parent.layer.msg(map.message,{icon: 6,time:1000});
window.location.href="listartcle";
},error:function(code){
parent.layer.msg('操作失败!',{icon: 5,time:1000});
}
});
});
}
后台操作
//单个删除
@RequestMapping("detetArtcle")
public String detetAdministrator_user(HttpSession session,Integer id){
System.out.println(id);
int s=artclelistservice.detetArtcle(id);
if(s!=0){
session.setAttribute("artTemplate",artclelistservice.articlelist());
return "article-list";
}
return "eoor";
}
//批量删除
@RequestMapping("doarticleDelete")
@ResponseBody
public Map<String, Object> doFalseDelete(String checkedId){
Map<String, Object> map=new HashMap<String, Object>();
String[] createDates = checkedId.split(",");
for(int i=0;i<createDates.length;i++){
String s= createDates[i];
int dete = Integer.parseInt(s);
int s1=artclelistservice.detetArtcle(dete);
}
map.put("message", "删除成功");
return map;
}