原理就是利用Layui的分頁組件和Vue組件的模板渲染功能。
我下面直接貼代碼，比較直觀。
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/international/Content/plugins/layui-v2.2.45/css/layui.css" media="all" /> </head> <body> <!--列表--> <div id="vueContainer"> <table class="layui-table" lay-filter="test"> <thead> <tr> <th width="10%">ID</th> <th width="50%">語言名稱</th> <th width="40%">語言備注</th> </tr> </thead> <tbody> <tr v-for="item in translateLanguages"> <td>{{item.Id}}</td> <td>{{item.LangName}}</td> <td>{{item.LangComment}}</td> </tr> </tbody> </table> </div> <!--分頁容器--> <div id="pagination"></div> <script src="/international/Content/js/jquery-2.1.1.min.js"></script> <script src="/international/Content/plugins/layui-v2.2.45/layui.js"></script> <script src="/international/Content/js/vue.js"></script> <script src="/international/Content/js/translate/translateLanguage/list.js"></script> </body> </html>
list.js
//使用Vue渲染模板，初始化時是沒有數據的，需要ajax請求拿到數據 var vue = new Vue({ el: "#vueContainer", data: { translateLanguages: null } }); //使用layui分頁 layui.use('laypage', function () { var laypage = layui.laypage; laypage.render({ elem: 'pagination' , count: totalCount , 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 = { pageIndex: pageIndex, pageSize: pageSize, //其它查詢條件可在下面添加 }; $.ajax({ type: 'POST', url: '/international/translatelanguage/getlist', dataType: 'json', data: param, async: false,//這里設置為同步執行，目的是等數據加載完再調用layui分頁組件，不然分頁組件拿不到totalCount的值 success: function (data) { vue.translateLanguages = data.data; totalCount = data.count; } }); };