Bootstrap-Datatables Java后台分页 批量删除 自定义搜索
1、先上一张效果图
主要页面html代码
-
主要js代码第一部分这部分代码要定义到全局变量里面
//设置隐藏
var item_table;//定义的表格，datatables的表格
var title;var sname;var status;var created;//自定义搜索所传的参数
$(function() {
laydate({//时间控件，使用的时候请引入laydate.js
elem: '#start',
event: 'focus'
});
js代码第二部分，最重要的部分
jQuery(function($) {
item_table= $('#item-table').DataTable( {
"ordering": false,
"searching":false,
"pagingType": "full_numbers",
"bAutoWidth": true,
"stateSave": false,
queryParams: {"s_title":title,"s_sname":sname,"s_status":status,"s_created":created},//自定义搜索穿的参数
"processing": true,
"serverSide": true,
"destroy":true,
"retrieve":true,
ajax : {
url : "item/list",//你的url
"data": function (d) {
//添加额外的参数传给服务器
d.title = title;
d.sname = sname;
d.status=status;
d.created=created
}
},
"columns": [
{render : function(data, type, row, meta) {
//为了根据复选框获取到该行的id
var content = '';
return content;
}
},
{data: "id" },
{data: "title"},
{ data: "gid",
render: function (data, type, row, meta) {
if(data==1){
return "商品1";
}else if (data==2){
return "商品2";
}else if (data==0){
return "商品3";
}else{
return "未知";
}
}
},
{ data: "price",
render: function (data, type, row, meta) {
return (data*1000/1000).toFixed(2);
}
},
{ data: "num"},
{ data: "barcode" },
{ data: "sname" },
{ data: "created",
"render" : function(data, type, full, meta) {
//时间格式化
return moment(data).format("YYYY-MM-DD HH:mm:ss");
}
},
{ data: "updated",
"render" : function(data, type, full, meta) {
//时间格式化
return moment(data).format("YYYY-MM-DD HH:mm:ss");
}
},
{ data: "status",
render: function (data, type, row, meta) {
//此处为了及时显示商品的状态
if(data==0){
return "禁用";
}else if (data==1){
return "正常";
}else if (data==2){
return "下架";
}else if(data==3){
return "删除";
}else{
return "未知";
}
}
}
],
"columnDefs" : [ {
"targets" : 11,//操作按钮目标列
"data" : null,
"render" : function(data, type,row) {
var id = '"' + row.id + '"';
var html;
if(data.status==0){
html = "启用 "
}else if(data.status!=0){
html = "禁用 "
}
html += "编辑 "
if(data.status==3){
html += "还原 "
}else if(data.status!=3){
html += "删除 "
}
return html;
}
} ]
} );
//搜索按钮点击事件
$("button").click(function(){
title= $("input[name='title']").val();
sname=$("input[name='sname']").val();
status=$("select[name='status']").val();
created=$("input[name='created']").val();
item_table.ajax.url('item/search/list').load();
});
})
//禁用商品此处我只写了一个
function forbiddenThisRowItem(id){
layer.confirm('确认要禁用吗？',function(index){
$.ajax({
type: "GET",
url: "item/forbidden/"+id,
success: function(data){
if(data.status == 200){
layer.msg('已禁用', {icon: 4,time:1000});
//为了避免修改商品状态后跳转到第一页，需要这么写
item_table.ajax.reload(null,false);
}else{
layer.msg('禁用失败', {icon: 5,time:1000});
}
}
});
});
}
//批量删除（彻底）此处我只写了一个
function batchCompleteDel_item(){
if ($("input[name='checkitem']:checked")[0] == null) {
layer.msg('请至少选择一件商品!',{icon: 5,time:1000});
return;
}
layer.confirm('您确定要彻底删除吗?',{btn: ['确定', '取消'],title:"提示"}, function(){
var ids = new Array();
$("input[name='checkitem']:checked").each(function() {
ids.push($(this).val());
});
$.ajax({
type: "post",
url: 'item/batch/complete/delete/item',
data: "ids="+ids,
dataType: "json",
success:function(data) {
if(data.status == 200){
layer.msg('删除成功', {icon: 1,time:1000});
item_table.ajax.reload(null,false);
}else{
layer.msg('删除失败', {icon: 2,time:1000});
}
$("input[type=checkbox][name='checkall']").removeProp('checked');//全选后请求成功后取消最上面复选框的选中状态
}
});
});
}
2、自定义搜索Java代码
mapper.xml
//service代码
public DataTableResult queryItemByCondition(Map map, int page, int rows) {
//DataTableResult这个类参看本人另一个微博
PageHelper.startPage(page, rows);
List itemList = tbItemMapper.searchItemList(map, page, rows);
DataTableResult result=new DataTableResult();
result.setData(itemList);
PageInfo info=new PageInfo<>(itemList);
result.setRecordsTotal((int) info.getTotal());
result.setRecordsFiltered((int) info.getTotal());
return result;
}
//Controller代码
public DataTableResult getItemListByCondition(HttpServletRequest request) {
int draw =Integer.parseInt(request.getParameter("draw"));
int start = Integer.parseInt(request.getParameter("start"));
int length = Integer.parseInt(request.getParameter("length"));
String title=request.getParameter("title");
String sname=request.getParameter("sname");
try {
String status=request.getParameter("status");
String created=request.getParameter("created");
Map map=new HashMap();
int page=1;
if(start==0) {
page=1;
}else {
page=start/length+1;
}
if(!title.equals("")) {
String s_title = new String(title.getBytes("ISO-8859-1"),"UTF-8");//中文乱码问题
map.put("title", s_title);
}else {
map.put("title", null);
}if (!sname.equals("")) {
String s_sname = new String(sname.getBytes("ISO-8859-1"),"UTF-8");
map.put("sname", s_sname);
}else {
map.put("sname", null);
}if(!status.equals("all")) {
map.put("status", status);
}else {
map.put("status", null);
}if(!created.equals("")) {
map.put("created", created);
}else {
map.put("created", null);
}
DataTableResult result = itemService.queryItemByCondition(map, page, length);
result.setDraw(draw);
return result;
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
3、批量删除的代码
//service代码
public Result deleteBatchComplete(Long[] ids) throws Exception {
for(int i=0;i
关于datatables配置和分页内容请参看另一篇https://blog.csdn.net/weixin_39555954/article/details/83110609