layui 数据表格+分页+搜索+checkbox+缓存选中项数据

在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用.

　　主要功能是使用数据表格, 做分页,做搜索,  还有checkbox,  支持全选.

　　当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下:

1.HTML  搜索输入框

2.HTML  搜索按钮

 搜索

3.HTML  table表格

4.HTML  时间格式转换

5. js  功能设定

 

6. 请求数据格式

 

//请求的数据格式

{"code":0,"count":39,"data":[{"id":57,"insertTime":1513578156000,"leaguerId":65,"phone":"1356***98907","status":0,"updateTime":1513578156000,"uuid":"7c94e354-cd87-4ea7-bccf-2e115e1cbc49"},{"id":56,"identificationNuber":"652101**3*","insertTime":1513578013000,"leaguerId":60,"name":"周*谨","phone":"135**907","status":0,"updateTime":1513578037000,"uuid":"ed91fac6-56f8-4771-aa79-32863a27bf6f"},{"id":55,"identificationNuber":"42098**","insertTime":1513576647000,"leaguerId":60,"name":"董*","phone":"1356**8908","status":0,"updateTime":1513576729000,"uuid":"62d58c68-b49f-44f4-b5a3-e8ea629b5d32"},{"id":54,"identificationNuber":"6501**","insertTime":1513576558000,"leaguerId":60,"name":"*光","phone":"158009**059","status":0,"updateTime":1513576590000,"uuid":"a65e3880-f44c-44cb-9f78-f7d7bbacee86"},{"id":53,"identificationNuber":"310114**","insertTime":1513576261000,"leaguerId":60,"name":"吴*雯","phone":"137**5261","status":0,"updateTime":1513576294000,"uuid":"6a0766f1-da1d-4c55-8bd5-5dd7a6ad7cd3"},{"id":52,"identificationNuber":"3201**","insertTime":1513574849000,"leaguerId":65,"name":"*骏","phone":"186**9521","status":0,"updateTime":1513574998000,"uuid":"89f1fddf-d3c2-4a3b-8a13-c501bdb8e22c"},{"id":51,"insertTime":1513562761000,"leaguerId":63,"phone":"15655**110","status":0,"updateTime":1513562761000,"uuid":"f4a3b875-d15c-423b-836b-9123cde96000"},{"id":49,"identificationNuber":"4210**","insertTime":1513561354000,"leaguerId":63,"name":"余*","phone":"1527**4673","status":0,"updateTime":1513561843000,"uuid":"b38a8660-bf74-41b9-b01f-6e79189327a3"},{"id":50,"insertTime":1513561498000,"leaguerId":63,"phone":"186**59965","status":0,"updateTime":1513561498000,"uuid":"445cd1dc-bd75-4a4e-933d-646e9823647a"},{"id":48,"insertTime":1513516215000,"leaguerId":63,"phone":"1356**8907","status":0,"updateTime":1513516215000,"uuid":"706851f6-9243-4ea9-97eb-fc8e12c42c77"}],"msg":""
}

 //效果:

7.后台java  

 

(1).controller

/*** 获取报告列表**@return*/
@RequestMapping(value = "/getReportList", method = {RequestMethod.GET})
@ResponseBody
public Map getReportList( Integer page ,  Integer limit ,String searContent) {logger.info("获取报告列表");if (SecurityUtils.getSubject().isAuthenticated() == false) {logger.error("未登录");return null;}System.out.println(searContent);Map mapParameter = new HashedMap();mapParameter.put("page", (page-1)*10);mapParameter.put("limit", limit);mapParameter.put("searContent", searContent);try {List vReports=reportService.findReportList(mapParameter);Integer count=reportService.findReportListCount(mapParameter);Map map = new HashedMap();map.put("code", 0);map.put("msg", "");map.put("count", count);map.put("data", vReports);return map;} catch (Exception e) {logger.error("获取报告列表 错误",e);}logger.error("获取报告列表");return null;
}

(2).Service

@Override
public List findReportList(Map mapParameter) {return  reportDao.selectList("findReportList",mapParameter);
}
@Override
public Integer findReportListCount(Map mapParameter) {return  reportDao.selectOne("findReportCount",mapParameter);
}

 

(3).mybatis  SQL

 

select *   FROM  report where status=0and ((name LIKE concat(concat("%",#{searContent}),"%"))or (phone LIKE concat(concat("%",#{searContent}),"%"))or (identification_nuber LIKE concat(concat("%",#{searContent}),"%")))ORDER BY update_time DESC limit  #{page} , #{limit};
select COUNT(*) FROM  report where status=0and ((name LIKE concat(concat("%",#{searContent}),"%"))or (phone LIKE concat(concat("%",#{searContent}),"%"))or (identification_nuber LIKE concat(concat("%",#{searContent}),"%")));

 

 

 

BUG网友解决方案(未测):

//实例layui.use(['table','form'], function(){var form = layui.form;    
//form监听checkbox事件form.on('checkbox', function(obj){    //当前元素var data = $(obj.elem);//遍历父级tr，取第一个，然后查找第二个td，取值  转换为Numbervar id = Number(data.parents('tr').first().find('td').eq(1).text());//选中or未选中var check = obj.elem.checked;   //复选框状态//  var checkStatus = table.checkStatus('users');//如果选中if(check==true){               //如果缓存数组存在值if(ids.length>0){              //id==0便是全选按钮if(id==0){       //循环当前页面所有数据for(var i=0;i