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.csdn.net/weixin_39555954/article/details/83110609
