參考這位大哥的：https://www.cnblogs.com/subendong/p/9232548.html
效果圖:
前端代碼部分
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="../../lib/layui.css" media="all" /> </head> <body> <!--列表--> <div id="vueContainer"> <!-- <div className="layui-row layui-col-space2"> <div class="layui-col-md1"> <input type="text" v-model="searchId" required lay-verify="required" placeholder="id" class="layui-input" autocomplete="off"/> </div> <div class="layui-col-md1"> <button id="btn2" class="layui-btn" @click.prevent="search()">搜索</button> </div> </div> --> <table class="layui-table" lay-filter="test"> <thead> <tr> <th>序號</th> <th>定時名稱</th> <th>業務編碼</th> <th>業務名稱</th> <th>定時開始時間</th> <th>詳情</th> <th>日志級別</th> <th>修改</th> <th>刪除</th> </tr> </thead> <tbody> <tr v-for="item in dataList" :key="item.id"> <td>{{item.id}}</td> <td>{{item.timerName}}</td> <td>{{item.businessCode}}</td> <td>{{item.businessName}}</td> <td>{{item.timerStartTime}}</td> <td>{{item.detail}}</td> <td>{{item.logLevel}}</td> <th> <a class="layui-btn layui-btn-normal" @click.prevent="upd(item.id)">修改</a> </th> <th> <button class="layui-btn layui-btn-danger" @click.prevent="del(item.id)">刪除</button> </th> </tr> </tbody> </table> </div> <!--分頁容器--> <div id="pagination"></div> <script src="../../plugin/jquery/jquery.min.js"></script> <script src="../../layui/layui.js"></script> <script src="../../lib/vue-2.4.0.js"></script> <script src="../../js/timer/index.js"></script> </body> </html>
index.js
//使用Vue渲染模板，初始化時是沒有數據的，需要ajax請求拿到數據 var vue = new Vue({ el: "#vueContainer", data: { dataList: null } }); //使用layui分頁 layui.use('laypage', function () { var laypage = layui.laypage; laypage.render({ elem: 'pagination' , count: totalCount ,limits: [5,10,15,20,50] //設置條數可以選擇顯示多少條 , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] , jump: function (obj, first) { //點擊非第一頁頁碼時的處理邏輯。比如這里調用了ajax方法，異步獲取分頁數據 if (!first) { pagination(obj.curr, obj.limit);//第二個參數不能用變量pageSize，因為當切換每頁大小的時候會出問題 } } }); }); var pageIndex = 1; var pageSize = 10; var totalCount = 0; pagination(pageIndex, pageSize); function pagination(pageIndex, pageSize) { //查詢條件 var param = { page: pageIndex, rows: pageSize, //其它查詢條件可在下面添加 }; //后台數據接口 $.ajax({ type: 'GET', url: 'http://127.0.0.1:8080/api/v1/timer/query', // dataType: 'json', data: param, async: false,//這里設置為同步執行，目的是等數據加載完再調用layui分頁組件，不然分頁組件拿不到totalCount的值 success: function (result) { console.log(result); vue.dataList = result.data.list; totalCount = result.data.totalRows; } }); };
后端java代碼
@ApiOperation(value = "查詢定時任務登記列表") @GetMapping(value = "/query") public RespResult queryTimer(Integer page,Integer rows,String timerName){ Map<String,Object> params = new HashMap<>(); if (StringUtils.isNotBlank(timerName)){ params.put("timerName",timerName); } params.put("pageNo",page); params.put("pageSize",rows); PageInfo<TimerInfo> timerInfoPageInfo = timerService.queryTimerList(params); return RespResult.SUCCESSFUL(timerInfoPageInfo); }