前言
專注拖控件6年的C#程序員，迫於某種原因做起了前端開發，然后發現純前端寫起來要人命啊
，所有的頁面交互邏輯全是JS代碼控制，寫起來好難受
。幸虧我JS功底深厚（自戀中……別打擾我……），很快就適應了，不然真的被搞死。
不過寫到后面發現，純JS控制用戶交互，體驗效果比aspx頁面好多了。頁面樣式雖然是自己手寫的，沒用什么前端框架，但是用的Vue數據框架啊，然后發現Vue有組件開發模式，就想着是不是可以把原來ascx控件變成組件，這樣寫前端也變成拖控件了（PS:雖然是寫標簽），但開發效率肯定提升很大啊。
於是開始折騰啟分頁組件，因為使用次數高，而且也是最麻煩的一個，就試着把原來的ascx分頁組件變成前端的，前面我寫過一篇分頁算法，這里我直接改成JS代碼，這也是分頁組件最核心的代碼。
正文
首先，遵循Vue的組件規范，定義組件模板，並進行全局注冊，基礎知識不知道的請看這里，代碼如下：
//注冊Vue組件 Vue.component('x-paging', { props: ['codelist', 'total', 'pagelist'], template: '<div id="xpaging" class="pagenum"><span class="pagemsg">每頁 ' + '<select id="pagesize" name="pagesize" onchange="XPaging.Api.ChangePageSize(this)">' + '<option v-bind:selected="code.selected?\'selected\':\'\'" v-for="code in codelist">{{code.pagesize}}</option>' + '</select>條 ' + '共<span class="number">{{total}}</span>條記錄</span>' + '<a v-bind:class="page.ClassName" href="javascript:;" v-for="page in pagelist" v-on:click="XPaging.Api.PageTurn(page.Value)">{{page.Code}}</a></div>' });
這里使用三個prop變量進行數據的交互，codelist：每頁數據大小集合，俗稱pagesize；total：總記錄數；pagelist：頁碼集合，就是第一頁，第二頁，第三頁……
需要注意的是Vue定義組件，必須用一個標簽包括起來，不然組件無法生效。
其次，就是組件的樣式，代碼如下：
/* 分頁控件樣式庫 */ .pagenum { float: left; height: 26px; line-height: 26px; font-size: 14px; margin-top: 8px; margin-bottom: 7px; vertical-align: middle; } /*頁碼格子*/ .pagenum a { text-decoration: none; text-align: center; display: block; float: left; height: 16px; line-height: 16px; padding: 5px 7px 5px 7px; vertical-align: middle; min-width: 16px; border-radius: 2px; margin-right: 5px; } .pagenum a:link, a:visited { text-decoration: none; } .pagenum a:hover, a:active { text-decoration: none; } .pagenum a:hover { background-color: #f15a22; opacity: .7; filter: alpha(opacity=70); color: #ffffff; } /*總記錄數*/ .number { color: #F30; margin-left: 5px; margin-right: 5px; } /*每頁記錄數*/ .pagemsg { text-align: center; display: block; float: left; height: 26px; line-height: 26px; margin-right: 10px; vertical-align: middle; } /*當前頁碼*/ .currindex { color: #FFF; background: #009ad6; } /*侯選頁*/ .waitpage { color: #4f5555; background: #F0f0f0; } .pagenum select { margin-right: 4px; height: 22px; padding: 0px 0px; font-size: 13px; font-weight: bold; color: #F30; }
再次，就是為了統一pagesize，和默認的頁面大小，我將其寫入了一個json文件中。
為什么要這樣呢？就是因為設計時，此控件會記錄用戶設置的頁面大小，當打開其他頁面或者刷新當前頁面時，會默認設置用戶上次選擇的頁面大小，代碼如下：
{
"XPageSize": [
{
"pagesize": 2,
"selected": false
},
{
"pagesize": 5,
"selected": false
},
{
"pagesize": 10,
"selected": true
},
{
"pagesize": 15,
"selected": false
},
{
"pagesize": 20,
"selected": false
},
{
"pagesize": 25,
"selected": false
},
{
"pagesize": 30,
"selected": false
},
{
"pagesize": 40,
"selected": false
},
{
"pagesize": 50,
"selected": false
},
{
"pagesize": 100,
"selected": false
}
],
"XCodeNum": 5
}
pagesize和selected我就不說了，其中XCodeNum表示的是”連續頁碼顯示的個數“，例如”1，2，3，4，5，……，10“連續顯示5個頁碼。
最后，就是組件實現的JS代碼了，核心方法有：
1.根據總記錄數和連續頁碼顯示個數，生成頁碼集合，就是pagelist；
2.獲取json文件的數據，生成codelist，以及存儲用戶設置的頁面大小，以便下次調用；
3.頁面跳轉，以及跳轉后執行數據刷新方法等。
代碼過長，只貼部分代碼，要看完整的代碼，及使用實例，請下載源碼。
//插件默認參數 var options = { //連續頁碼顯示個數（必須是奇數） ContinNO: 5, //索引頁 CurrentPageIndex: 1, //總頁數 PageCount: 0, //頁面顯示記錄數 PaseSize: 0, //綁定數據方法名 DataBindFunc: "", //JSON配置文件路徑 ConfigUrl: "../lib/XPaging/XPaingConfig.json" }; //用戶調用接口 var XPagingInit = { //配置信息 config: function (opts) { //沒有參數傳入，直接返回默認參數 if (!opts) return options; //有參數傳入，通過key將options的值更新為用戶的值 for (var key in opts) { options[key] = opts[key]; } return this; }, //初始化插件 init: function (vueObj) { $.ajax({ type: "GET", url: options.ConfigUrl, async: false, dataType: 'Json', success: function (result) { options.ContinNO = result.XCodeNum; Xdata.SetPageSize(result.XPageSize, vueObj); Xdata.GetPageCount(vueObj.total); Xdata.GetPageList(vueObj); }, error: function (data, XMLHttpRequest, textStatus, errorThrown) { alert("分頁控件初始化失敗，返回信息：" + JSON.stringify(data)); } }); return this; }, //獲取當前頁索引 GetCurrentPageIndex: function () { return options.CurrentPageIndex; }, //獲取頁面大小 GetPageSize: function () { return options.PaseSize; } };
最終的運行效果如下圖：
