springboot專案，layui與pageHelper整合，列表分頁，條件查詢
阿新 • • 發佈：2018-11-11
一、前端頁面
重點：1、table.render初始化載入資料
2、reload查詢按鈕觸發，資料重新載入
3、查詢按鈕繫結事件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html lang="en"> <head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/style/admin.css" media="all"> <title>App版本管理</title> </head> <body> <div class="layui-fluid"> <div class="layui-card layui-form-item p-filter-search"> <form class="layui-form" action=""> <div class="search-term"> <label class="layui-form-label">版本</label> <div class="layui-input-block"> <input type="text" id="version" placeholder="請輸入" autocomplete="off" class="layui-input"> </div> </div> <div class="search-term"> <div class="layui-inline"> <label class="layui-form-label">開始時間</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="startDate" placeholder="yyyy-MM-dd"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">結束時間</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="endDate" placeholder="yyyy-MM-dd"> </div> </div> </div> <div class="search-term"> <a class="layui-btn" data-type="reload">查詢</a> </div> </form> </div> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">表格列表</div> <div class="layui-card-body layadmin-takerates"> <div class="add-btn"> <button class="layui-btn layui-btn-sm" data-type="add" id="addTable">新增 +</button> </div> <table class="layui-table" id="idTest" lay-filter="listTable"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit" data-method="setTop">編輯</a> </script> </div> </div> </div> </div> <script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js"></script> <script src="${pageContext.request.contextPath}/static/js/common/jquery-2.0.3.min.js"></script> <script> layui.config({ base: '${pageContext.request.contextPath}/static/layuiadmin/' //靜態資源所在路徑 }).extend({ index: 'lib/index' //主入口模組 }).use(['index', 'table','jquery'], function(){ var $ = layui.$ ,form = layui.form ,table = layui.table; //頁面初始化載入資料 table.render({ elem: '#idTest' ,url: '${pageContext.request.contextPath}/apkVersion/datalist' ,cols: [[ //標題欄 {type:'checkbox', fixed: 'left'} ,{field: 'id', title: 'ID', width: 80, sort: true,fixed: true} ,{field: 'apkUrl', title: '連線', width: 350} ,{field: 'newFeature', title: '新增特徵', minWidth: 80} ,{field: 'versionCode', title: '版本序號', minWidth: 60} ,{field: 'version', title: '版本', width: 80} ,{field: 'createUser', title: '操作人', width: 80} ,{field: 'os', title: '系統', width: 80, sort: true} ,{field: 'updateTime', title: '更新時間', width: 200, templet :function (row){ return FormatTime(row.updateTime); } } ,{title: '操作', width:178, align:'center', toolbar: '#barDemo'} ]] ,id: 'testReload' ,page: true //是否顯示分頁 }); //監聽表格複選框選擇 table.on('checkbox(listTable)', function(obj){ console.log(obj) }); //監聽工具條 table.on('tool(listTable)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ var currentData = JSON.stringify(data); var updRecord=layer.open({ type: 2 ,id: (new Date()).valueOf() ,title: '編輯' ,content: "${pageContext.request.contextPath}/apkVersion/toAdd?id="+data.id+"" ,area: ['800px', '600px'] ,btn: ['確定', '取消'] ,maxmin: true ,success: function(layero, index){ var body = layer.getChildFrame('body', index); var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的視窗物件，執行iframe頁的方法：iframeWin.method(); var paramId=body.find("input[name='id']"); paramId.val(111); } }); layer.full(updRecord); } }); var $ = layui.$, active = { getCheckData: function(){ //獲取選中資料 var checkStatus = table.checkStatus('idTest') ,data = checkStatus.data; layer.alert(JSON.stringify(data)); } ,getCheckLength: function(){ //獲取選中數目 var checkStatus = table.checkStatus('idTest') ,data = checkStatus.data; layer.msg('選中了：'+ data.length + ' 個'); } ,isAll: function(){ //驗證是否全選 var checkStatus = table.checkStatus('idTest'); layer.msg(checkStatus.isAll ? '全選': '未全選') } ,add: function(){ var newRecord=layer.open({ type: 2 ,id: (new Date()).valueOf() ,title: '編輯' ,content: "${pageContext.request.contextPath}/apkVersion/toAdd" ,area: ['800px', '600px'] ,btn: ['確定', '取消'] ,maxmin: true ,success: function(layero, index){ var body = layer.getChildFrame('body', index); var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的視窗物件，執行iframe頁的方法：iframeWin.method(); var paramId=body.find("input[name='id']"); paramId.val(111); } }); layer.full(newRecord); } ,reload: function(){//查詢按鈕，過載資料 var version = $('#version').val(); var startDate = $('#startDate').val(); var endDate = $('#endDate').val(); table.reload('testReload', { page: { curr: 1 //重新從第 1 頁開始 } ,where: { //往後臺傳遞的引數 version: version, startDate: startDate, endDate: endDate } }); } }; $('.layadmin-takerates .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); //查詢按鈕繫結事件 $('.search-term .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); //日期控制元件 layui.use(['laydate'], function(){ var laydate = layui.laydate; //常規用法 laydate.render({ elem: '#startDate' }); //國際版 laydate.render({ elem: '#endDate' ,lang: 'en' }); }); </script> <script type="text/javascript"> //日期格式化 function FormatTime(v){ var date = new Date(v); var y = date.getFullYear(); var m = date.getMonth()+1; m = m<10?'0'+m:m; var d = date.getDate(); d = d<10?("0"+d):d; var h = date.getHours(); h = h<10?("0"+h):h; var M = date.getMinutes(); M = M<10?("0"+M):M; var str = y+"-"+m+"-"+d+" "+h+":"+M; return str; } </script> </body> </html>
2、後臺資料處理，往前端傳遞的資料格式為json，需要使用@ResponseBody；
必須攜帶code，否則資料載入錯誤；
必須攜帶count，否則分頁異常；
controller程式碼如下：
@RequestMapping("/datalist") @SystemControllerLog(sysKey=SysConsts.SYSAPPVERGETKEY,SysTypeName=SysConsts.SYSAPPVERMsg,description=SysConsts.SYSAPPVERGETMsg) @ResponseBody public Object datalist(HttpServletRequest request , @RequestParam Map<String, String> paramMap){ PageInfo<ApkVersionUpgrade> pageInfo = apkVersionService.list(request,paramMap); Map<String,Object> map=new HashMap<String,Object>(); map.put("data", pageInfo.getList()); map.put("code", 0); map.put("msg", "請求成功"); map.put("count", pageInfo.getTotal()); return map; }
serviceImpl程式碼如下：
@Override public PageInfo<ApkVersionUpgrade> list(HttpServletRequest request, Map<String, String> paramMap) { Integer pno=Integer.parseInt(paramMap.get("page")); Integer pageSize=Integer.parseInt(paramMap.get("limit")); PageHelper.startPage(pno, pageSize); List<ApkVersionUpgrade> list =apkVersionUpgradeMapper.list(paramMap); PageInfo<ApkVersionUpgrade> pageInfo = new PageInfo<ApkVersionUpgrade>(list); return pageInfo; }
pageHelper是mybatis的分頁外掛，maven的pom.xml配置如下：
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
</dependency>application.properties配置如下：
#分頁外掛
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
pagehelper.page-size-zero=true注：layui與pageHelper整合後，分頁是非同步重新整理資料的