使用layui+springboot分頁demo（第二版，常用版）
阿新 • • 發佈：2018-12-18
1.前臺使用layui分頁，官方文件展示如下：
就是用這個分頁條來進行分頁：
效果圖如下：
比第一個版本多了一個模糊搜尋框，這也是實際開發中常用到的
注意：分頁條用的layui,所以需要引入一套layui,表格用的bootstrap表格的類，請引入bootstrap,當然首先必須引入jquery
3.下面是前臺程式碼：前臺向後臺傳遞倆引數，一個curr,一個limit，一個模糊查詢欄位mh
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="js/layui/css/layui.css"> <link rel="stylesheet" href="js/bootstrap-table.min.css"></link> <link rel="stylesheet" href="js/bootstrap.min.css"></link> </head> <body> <div style="width: 100%;height: 80px;"> <input type="text" placeholder="請輸入班級進行模糊查詢" id="mh" style="height: 30px;width: 174px;margin-left: 1224px;margin-top: 25px;"> <button style="width: 70px;height: 30px;background: #fff;border: 1px solid #c6c6c5;" id="ss">搜尋</button> </div> <table class="table table-striped"> <thead> <th>優惠券型別</th> <th>發放物件</th> <th>發放時間</th> <th>發放面額</th> <th>每使用者發放數量</th> <th>有效期</th> </thead> <tbody id="tbs"> </tbody> </table> <div id="demo8"></div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.min.js"></script> <script src="js/layui/layui.js"></script> <script> $(function(){ fenye($("#mh").val()); }) function fenye(MH){ layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; //自定義排版 $.ajax({ type:'post', dataType:'json', data:{'curr':1,'limit':10,'mh':MH}, url:'../../DataShow3', success:function(data){ showData(data); laypage.render({ elem: 'demo8' ,count: data.ct ,layout: ['limit', 'prev', 'page', 'next'] ,jump:function(obj){ //分頁切換的回掉 $.ajax({ type:'post', dataType:'json', data:{'curr':obj.curr,'limit':obj.limit,'mh':MH}, url:'../../DataShow3', success:function(data){ showData(data); } }) } }); } }) }); } function showData(ds){ $("#tbs").empty(); var htmlStr=""; for(var i=0;i<ds.data.length;i++){ htmlStr+='<tr><td>'; htmlStr+=ds.data[i].id; htmlStr+='</td><td>'; htmlStr+=ds.data[i].className; htmlStr+='</td><td>'; htmlStr+=ds.data[i].classSumNum; htmlStr+='</td><td>'; htmlStr+=ds.data[i].teacherName; htmlStr+='</td><td>'; htmlStr+=ds.data[i].fdyName; htmlStr+='</td><td>'; htmlStr+=ds.data[i].fdyNum; htmlStr+='</td></tr>' } $("#tbs").append(htmlStr); } //點選搜尋進行模糊查詢 $("#ss").click(function(){ //獲取文字框欄位 var MH=$("#mh").val(); fenye(MH); }) </script> </body> </html>
4.controller程式碼：
public Map<String,Object> fdf(int curr, int limit,String mh){ Map<String,Object> map=new HashMap<String,Object>(); List<ClassTable> ct=dataShowService.queryInfox(curr,limit,mh); //總數居條數 int countx=dataShowService.queryAllCountxx(mh); map.put("data",ct); map.put("ct",countx); return map; }
5.service程式碼：
List<ClassTable> queryInfox(int curr, int limit, String mh);
int queryAllCountxx(String mh);6.serviceImpl程式碼
@Override public List<ClassTable> queryInfox(int curr, int limit, String mh) { //根據當前頁算出來起始資料是第幾條 curr=(curr-1)*limit; return dataShowServiceMapper.queryInfox(curr,limit,mh); } @Override public int queryAllCountxx(String mh) { return dataShowServiceMapper.queryAllCountxx(mh); }
7.dao程式碼：
List<ClassTable> queryInfox(@Param("curr") int curr, @Param("limit") int limit, @Param("mh")String mh);
int queryAllCountxx(String mh);8.mapper程式碼：
<select id="queryInfox" resultType="com.ansheng.entity.ClassTable">
select * from classtable where className LIKE '%${mh}%' limit #{curr},#{limit}
</select>
<select id="queryAllCountxx" resultType="java.lang.Integer">
select count(*) from classtable
<if test='_parameter != "" and _parameter != null'>
where className LIKE '%${_parameter}%'
</if>
</select>結束了，是不是感覺so easy