代碼以下:javascript
page.js代碼以下html
/** * 分頁類 * pageCount // 分頁總數 * currentPage // 當前頁 * link // 鏈接地址 */ function Page(opts) { this.opts = { // 基本配置 pageCount: 0, // 分頁總數 currentPage: 1, // 當前頁碼 link: '', // 分頁鏈接地址前綴 lastNum: 4, // 尾部頁碼數字 end: 9, // 在7頁之前顯示的分頁數量要和7頁之後的分頁數量一直 // 文字常量 prevText: '上一頁', // 上一頁文字 nextText: '下一頁', // 下一頁文字 // 樣式配置 pageListClass: 'page-list', // 分頁數字樣式 prevClass: 'page-prev', // 上一頁樣式 nextClass: 'page-next', // 下一頁樣式 currentPageClass: 'page-current', // 當前頁樣式 disabledClass: 'page-disabled', // 分頁鏈接不可用 }; // 覆寫屬性 for(key in opts) { this.opts[key] = opts[key]; } opts = this.opts; this.htlm = ''; // 獲取分頁html this.getHtml = function() { if(opts.currentPage > opts.pageCount) { opts.currentPage = opts.pageCount; } if(opts.currentPage < 1) { opts.currentPage = 1; } this.html = ''; this.getPrevPage(); // 上一頁 this.getFirstPage(); // 首頁 this.getPageNumber(); // 頁碼 this.getNextPage(); // 下一頁 return this.html; }; // 獲取頁碼 this.getPageNumber = function() { // 1 2-11 30 // 顯示更多 if(opts.pageCount > 11) { // 當前頁碼前面有3個頁碼,當前頁碼後面有6個頁碼 == 10 var start = 2; if(opts.currentPage > 5) { start = opts.currentPage - 3; opts.end = opts.currentPage + opts.lastNum; } if(opts.currentPage + opts.lastNum > opts.pageCount) { opts.end = opts.pageCount; } for(var i = start; i <= opts.end; i++) { var classArr = []; classArr.push(opts.pageListClass); if(getCurrentPage(i)) { classArr.push(getCurrentPage(i)); this.html += '<em class="' + classArr.join(' ') + '">' + i + '</em>'; } else { this.html += '<a href="' + getLink(i) + '" class="' + classArr.join(' ') + '">' + i + '</a>'; } } // 是否顯示尾頁邏輯 if((opts.currentPage + opts.lastNum) < opts.pageCount) { this.getLastPage(); // 尾頁 } } else { for(var i = 2; i <= opts.pageCount; i++) { var classArr = []; classArr.push(opts.pageListClass); if(getCurrentPage(i)) { classArr.push(getCurrentPage(i)); this.html += '<em class="' + classArr.join(' ') + '">' + i + '</em>'; } else { this.html += '<a href="' + getLink(i) + '" class="' + classArr.join(' ') + '">' + i + '</a>'; } } } }; // 獲取首頁頁碼 this.getFirstPage = function() { var classArr = []; classArr.push(opts.pageListClass); if(getCurrentPage(1)) { classArr.push(getCurrentPage(1)); } if(getCurrentPage(1)) { this.html += '<em class="' + classArr.join(' ') + '">' + 1 + '</em>'; } else { this.html += '<a href="' + getLink(1) + '" class="' + classArr.join(' ') + '">1</a>'; } }; // 獲取尾頁頁碼 this.getLastPage = function() { var classArr = []; classArr.push(opts.pageListClass); if(getCurrentPage(opts.pageCount)) { classArr.push(getCurrentPage(opts.pageCount)); } if(getCurrentPage(opts.pageCount)) { this.html += '<em class="' + classArr.join(' ') + '">' + opts.pageCount + '</em>'; } else { this.html += '<a href="' + getLink(opts.pageCount) + '" class="' + classArr.join(' ') + '">' + opts.pageCount + '</a>'; } }; // 獲取上一頁 this.getPrevPage = function() { var classArr = []; var href = ""; classArr.push(opts.prevClass); if(opts.currentPage == 1) { // 若是是在第一頁則不顯示上一頁 return; classArr.push(opts.disabledClass); href = 'javascript:;'; } else { href = getLink(opts.currentPage - 1); } this.html += '<a href="' + href + '" class="' + classArr.join(' ') + '">' + opts.prevText + '</a>'; }; // 獲取下一頁 this.getNextPage = function() { var classArr = []; var href = ""; classArr.push(opts.nextClass); if(opts.currentPage == opts.pageCount) { // 若是是在最後一頁則不顯示下一頁 return; classArr.push(opts.disabledClass); href = 'javascript:;'; } else { href = getLink(opts.currentPage + 1); } this.html += '<a href="' + href + '" class="' + classArr.join(' ') + '">' + opts.nextText + '</a>'; }; // 獲取鏈接路徑 function getLink(num) { return opts.link+ '/' + num; } // 檢測是不是當前頁 function getCurrentPage(pageNum) { if(opts.currentPage == pageNum) { return opts.currentPageClass; } return ''; } }; module.exports = Page;
調用以下:java
// 分頁 var p = new Page({ pageCount: Math.ceil(result[0] / pageCount), currentPage: parseInt(currentPage), link: '/upload/packagelist' }); // p.getHtml() // 返回拼裝好的html
12-3 修復了bug,和增長了靈活的預留頁配置this