Bootstrap-Datatables Java后台分页 批量删除 自定义搜索
1、先上一张效果图
主要页面html代码
<div class="search_style">
<ul class="search_content clearfix">
<li><label class="l_f">商品名称</label><input name="title" type="text" class="text_add" placeholder="输入商品名称" style=" width:250px"/></li>
<li><label class="l_f">商家名称</label><input name="sname" type="text" class="text_add" placeholder="输入商家名称" style=" width:250px"/></li>
<li><label class="l_f">商品状态</label>
<select class="combobox" id="status" name="status">
<option value="all">选择商品状态</option>
<option value="1">正常</option>
<option value="2">下架</option>
<option value="3">删除</option>
<option value="0">禁用</option>
</select>
</li>
<li><label class="l_f">添加时间</label><input class="inline laydate-icon" id="start" name="created" style=" margin-left:10px;"/></li>
<li style="width:90px;"><button type="button" class="btn_search"><i class="icon-search"></i>查询</button></li>
</ul>
</div>
<div class="border clearfix">
<span class="l_f">
<a href="/add_item" title="添加商品" class="btn btn-warning itemAdd_form"><i class="icon-plus"></i>添加商品</a>
<a href="javascript:void(0)" onclick="batchdel_item()" class="btn btn-danger"><i class="icon-trash"></i>批量删除</a>
<a href="javascript:void(0)" onclick="batchoffShelf_item()" class="btn btn-info"><i class="icon-minus"></i>批量下架</a>
<a href="javascript:void(0)" onclick="batchonShelf_item()" class="btn btn-primary"><i class="icon-plane"></i>批量上架</a>
<a href="javascript:void(0)" onclick="batchRecover_item()" class="btn btn-success"><i class="icon-reply"></i>批量恢复</a>
<a href="javascript:void(0)" onclick="batchForbidden_item()" class="btn btn-danger"><i class="icon-stop"></i>批量禁用</a>
<a href="javascript:void(0)" onclick="batchCompleteDel_item()" class="btn btn-inverse"><i class="icon-remove"></i>批量删除(彻底)</a>
</span>
<span class="r_f">共<b>${item_count}</b>件商品</span>
</div>
<!--产品列表展示-->
<div class="h_products_list clearfix" id="products_list">
<div id="scrollsidebar" class="left_Treeview">
<div class="show_btn" id="rightArrow"><span></span></div>
<div class="widget-box side_content" >
<div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
<div class="side_list"><div class="widget-header header-color-green2"><h4 class="lighter smaller">类目列表</h4></div>
<div class="widget-body">
<div class="widget-main padding-8"><div id="categoryTree" class="ztree"></div></div>
</div>
</div>
</div>
</div>
<div class="table_menu_list" id="itemIframe">
<table class="table table-striped table-bordered table-hover" id="item-table">
<thead>
<tr>
<th width="25px"><label><input type="checkbox" class="ace" name="checkall"/><span class="lbl"></span></label></th>
<th width="200px">商品编号</th>
<th width="250px">商品名称</th>
<th width="120px">商品类型</th>
<th width="120px">价格</th>
<th width="120px">库存数量</th>
<th width="120px">条码</th>
<th width="180px">店铺名称</th>
<th width="240px">创建时间</th>
<th width="240px">更新时间</th>
<th width="70px">状态</th>
<th width="240px">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div> 主要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 = '<label>';
content += '<input type=\"checkbox\" class=\"ace\" name=\"checkitem\" value="'+row.id+'"/><span class=\"lbl\"></span>';
content += '</label>';
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 "<span class=\"label label-danger radius\">禁用</span>";
}else if (data==1){
return "<span class=\"label label-success radius\">正常</span>";
}else if (data==2){
return "<span class=\"label label-warning radius\">下架</span>";
}else if(data==3){
return "<span class=\"label label-default radius\">删除</span>";
}else{
return "<span class=\"label label-secondary radius\">未知</span>";
}
}
}
],
"columnDefs" : [ {
"targets" : 11,//操作按钮目标列
"data" : null,
"render" : function(data, type,row) {
var id = '"' + row.id + '"';
var html;
if(data.status==0){
html = "<a href='javascript:void(0);' onclick='startThisRowItem("+id+")' class='btn btn-xs '><i class='icon-ok bigger-90'></i>启用 </a>"
}else if(data.status!=0){
html = "<a href='javascript:void(0);' onclick='forbiddenThisRowItem("+id+")' class='btn btn-xs btn-danger'><i class='icon-stop bigger-90'></i>禁用 </a>"
}
html += "<a href='javascript:void(0);' onclick='editThisRowItem("+ id + ")' class='btn btn-xs btn-info'><i class='icon-edit bigger-90'></i>编辑</a> "
if(data.status==3){
html += "<a href='javascript:void(0);' onclick='recoverThisRowItem("+ id + ")' class='btn btn-xs btn-success'><i class='icon-reply bigger-90'></i>还原</a> "
}else if(data.status!=3){
html += "<a href='javascript:void(0);' onclick='deleteThisRowItem("+ id + ")' class='btn btn-xs btn-warning '><i class='icon-trash bigger-90'></i>删除</a> "
}
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
<!-- 搜索商品列表 -->
<select id="searchItemList" parameterType="map" resultMap="BaseResultMap" >
SELECT * from tb_item
<where>
<if test="map.title!=null and map.title!=''">
and title like "%"#{map.title}"%"
</if>
<if test="map.sname!=null and map.sname!=''">
and sname like "%"#{map.sname}"%"
</if>
<if test="map.status!=null and map.status!=''">
and status=#{map.status}
</if>
<if test="map.created!=null and map.created!=''">
and date_format(created,'%Y-%m-%d')=#{map.created}
</if>
</where>
</select>
//service代码
public DataTableResult queryItemByCondition(Map<String, Object> map, int page, int rows) {
//DataTableResult这个类参看本人另一个微博
PageHelper.startPage(page, rows);
List<TbItem> itemList = tbItemMapper.searchItemList(map, page, rows);
DataTableResult result=new DataTableResult();
result.setData(itemList);
PageInfo<TbItem> 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<String, Object> map=new HashMap<String, Object>();
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<ids.length;i++) {
tbItemMapper.deleteByPrimaryKey(ids[i]);
}
return Result.ok();
}
Controller代码
public Result batchdelCompleteItem(Long[] ids) {
try {
Result result = itemService.deleteBatchComplete(ids);
return result;
}catch(Exception e) {
e.printStackTrace();
return Result.buildObj(503, "删除异常");
}
}关于datatables配置和分页内容请参看另一篇https://blog.****.net/weixin_39555954/article/details/83110609