layui真分頁ssm框架 layui2
阿新 • • 發佈：2018-11-10
jsp:
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="root" value="${pageContext.request.contextPath}"></c:set> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>開啟分頁 - 資料表格</title> <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="${root}/resource/layuiAdmin/src/layuiadmin/layui/css/layui.css" media="all"> <script src="${root}/resource/js/jquery-1.11.0.min.js"></script> <script src="${root}/resource/layuiAdmin/src/layuiadmin/layui/layui.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ //ajax請求後臺資料 getShopCustomerManagePageInfo(); //點選搜尋時 搜尋資料 $("#selectButton").click(function(){ getShopCustomerManagePageInfo(); currentPageAllAppoint = 1; //當點選搜尋的時候，應該回到第一頁 toPage();//然後進行分頁的初始化 }) toPage(); }); //分頁引數設定 這些全域性變數關係到分頁的功能 var startAllAppoint = 0; var limitAllAppoint = 10; var currentPageAllAppoint = 1; var totalPageAllAppoint = 0; var dataLength = 0; //ajax請求後臺資料 function getShopCustomerManagePageInfo(){ $.ajax({ type:"post", async:false, url:"${root}/demo/layui_fys", data:{start:startAllAppoint, limit:limitAllAppoint,selectValue:$("#selectValue").val()}, success:function(data,status){ /* data=eval("("+data+")"); */ getShopCustomesInfo(data.root); startAllAppoint = data.currentResult;//當前頁數(後臺返回) totalPageAllAppoint = data.totalPage;//總頁數(後臺返回) } }); } function getShopCustomesInfo(data){ var s = "<tr><th>人員編號</th><th>英文姓</th><th>英文名</th><th>證件編號</th></tr>"; $.each(data,function(v,o){ s+='<tr><td>'+o.RYBH+'</td>'; s+='<td>'+o.YWX+'</td>'; s+='<td>'+o.YWM+'</td>'; s+='<td>'+o.ZJHM+'</td>'; }); if(data.length>0){ $("#t_customerInfo").html(s); }else{ $("#page1").hide(); $("#t_customerInfo").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暫無資料</span>"); } } function toPage(){ layui.use(['form', 'laypage', 'layedit','layer', 'laydate'], function() { var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate, laypage = layui.laypage; var nums = 10; //呼叫分頁 laypage.render({ elem: 'paged' ,count: totalPageAllAppoint //得到總頁數，在layui2.X中使用count替代了，並且不是使用"總頁數"，而是"總記錄條數" ,curr: currentPageAllAppoint ,skip: true ,jump: function(obj, first){ currentPageAllAppoint = obj.curr; startAllAppoint = (obj.curr-1)*limitAllAppoint; //document.getElementById('biuuu_city_list').innerHTML = render(obj, obj.curr); if(!first){ //一定要加此判斷，否則初始時會無限重新整理 getShopCustomerManagePageInfo();//一定要把翻頁的ajax請求放到這裡，不然會請求兩次。 //location.href = '?page='+obj.curr; } } }); }); }; </script> </head> <body> <div class="admin-main"> <blockquote class="layui-elem-quote"> <form class="layui-form" action="" > <div class="layui-form-item"> <div class="layui-input-inline"> <input type="text" id="selectValue" lay-verify="required" placeholder="客戶姓名，電話" autocomplete="off" class="layui-input"> </div> <button class="layui-btn" type="button" id="selectButton">搜尋</button> </div> </form> <span><a href="shop_customer_manager_page_info">顯示所有客戶</a></span> </blockquote> <fieldset class="layui-elem-field"> <legend>客戶列表</legend> <div class="layui-field-box layui-form"> <table class="layui-table admin-table" id="t_customerInfo"> </table> </div> </fieldset> <div class="admin-table-page"> <div id="paged" class="page"> </div> </div> </div> </body> </html>
java:
@RequestMapping(value="layui_fys") @ResponseBody public Map<String, Object> layui_fys(Integer start, Integer limit, String selectValue) throws Exception{ System.out.println(start+"//"+limit+"//"+selectValue); Map<String, Object> map=new HashMap<String,Object>(); Page page = new Page(); page.setStart(start); page.setEnd(start+limit); map.put("slz", selectValue); map.put("page", page); int total = demoService.getlayui_fysCount(map); List<Map<String,Object>> list; if(total>0){ list = demoService.getlayui_fys(map); //System.out.println(list.get(0).get("ZJHM")); }else{ list = new ArrayList<Map<String,Object>>(); } System.out.println(list); map.clear(); map.put("currentResult", start); map.put("totalPage", total); map.put("root", list); //System.out.println("json:----" + jsonObject.toString()); return map; }
sql:
//以Oracle資料庫為例 <!-- layui計數 --> <select id="getlayui_fysCount" parameterType="java.util.Map" resultType="java.lang.Integer"> select count(1) from crj_jwry_rcsp_ryjbxxb <if test='slz != null and slz != "" '> where rybh = #{slz} or zjhm = #{slz} or ywx= #{slz} or ywm= #{slz} </if> </select> <!-- 資料列表layui --> <select id="getlayui_fys" parameterType="java.util.Map" resultType="java.util.Map"> select b.* from ( select a.* ,rownum rn from ( select * from crj_jwry_rcsp_ryjbxxb <if test='slz != null and slz != "" '> where rybh = #{slz} or zjhm = #{slz} or ywx= #{slz} or ywm= #{slz} </if> order by rybh ) a where rownum <= #{page.end} ) b where rn>#{page.start} </select>