從零開始做一個pagination分頁組件
開始一個組件，毫無目的的寫代碼是一個不好的習慣，要經(jīng)歷 分析 => 抽象 => 實現(xiàn) => 應用 四個階段。
組件DEMO地址：https://github.com/CaptainLiao/zujian/tree/master/pagination
分析需求
當前頁碼顯示前后三頁，以及在兩端顯示上一頁、下一頁
未顯示的地方用 ‘...'代替
舉個栗子：
假設總共有30頁
當前為第一頁：1 2 3 4 ... 30 下一頁
當前為第二頁：上一頁 1 2 3 4 5 ... 30 下一頁
當前為第三頁：上一頁 1 2 3 4 5 6 ... 30 下一頁
.
當前為第6頁：上一頁 1 ... 3 4 5 6 7 8 9 ... 30 下一頁
.
當前為第29頁：上一頁 1 ... 26 27 28 29 30 下一頁
當前為第30頁：上一頁 1 ... 27 28 29 30
抽象
分析上面的例子，發(fā)現(xiàn)決定輸出的因素有兩個：當前頁碼和總頁數(shù)。
于是，我們設定一個函數(shù)用來表示當前頁碼的顯示內容：
/**
* @param {Number} page 當前頁
* @param {Number} totalPage 總頁數(shù)
*/
function pagination(page, totalPage) {
var str = '';
// todo...
return str;
}
// 運行函數(shù)，打印出值
var ret = pagination(4, 30)
console.log(ret)
>上一頁 1 2 3 4 5 6 7 ... 30 下一頁
實現(xiàn)
輸入和輸出都有了，接著正式開始擼：
function pagination(page, totalPage) {
var str = page;
// 這里實現(xiàn)當前頁面顯示前后三項功能
for(var i=1; i< totalPage; i++) {
if(page-i>1) {
str = page-i +' '+ str;
}
if(page + i < totalPage) {
str = str + ' ' + (page+i)
}
}
// 以page為中心，向左右擴展
// 向左，先判斷當前page向左的第四個數(shù)是否大于 1
if(page-4 > 1) {
str = '... ' + page;
}
// 繼續(xù)向左判斷
if(page >1) {
str = "上一頁" + '... ' +1 +' ' +str;
}
// 向右，判斷當前page向右的第四個數(shù)字是否小于 totalPage
if(page + 4 < totalPage) {
str = '... '+ str;
}
if(page < totalPage) {
str = str +' ' + totalPage +' '+ '下一頁';
}
return str;
}
現(xiàn)在，我們可以執(zhí)行下面的函數(shù)，取得我們想要的結果：
var total = 30;
for(var i = 1; i< total; i++) {
var ret = showPage(i, total);
console.log(ret)
}
至此，我們已經(jīng)實現(xiàn)了分頁的邏輯。
應用
接下來的應用就非常簡單了，不外乎是給str 加一些標簽和class，于是我們就得到了一個分頁組件：
HTML:
<ul id="pagination-list" class="clearfix2"> </ul>
javascript:
function pagination(page, totalPage) {
var str = '<li class="page-active">'+page+'</li>';
for(var i=1; i<=3; i++) {
if(page - i > 1) {
str = '<li class="page-item">'+(page-i)+'</li>' +' '+ str;
}
if(page + i < totalPage) {
str = str +" "+'<li class="page-item">'+(page+ i)+'</li>'
}
}
if(page-4 >1) {
str = '<li class="page-item">... </li>' +str;
}
if (page >1) {
str= '<li class="page-up">上一頁</li>'+ ' '+'<li class="page-item">1</li>' +' '+ str;
}
if(page+4< totalPage) {
str = str+ '<li class="page-item"> ...</li>';
}
if(page < totalPage) {
str = str + " " +'<li class="page-item">'+totalPage+'</li>' +" " +'<li class="page-down">下一頁</li>'
}
return str;
}
var totalPage = 30;
var str = pagination(1, totalPage);
var wrap = $("#pagination-list");
// 這里引用了 jQuery
wrap.html(str)
.on('click', '.page-item', function () {
var cur = parseInt($(this).text());
wrap.html(pagination(cur, totalPage));
});
看看效果吧：
目前來說，進展順利，但是！還有很多需要優(yōu)化的地方：樣式固定，不能自由更改；初始化和交互混雜在一起，沒有對代碼進行封裝...
又經(jīng)過一番折騰，這個分頁組件終于完成，下載demo：
https://github.com/CaptainLiao/zujian/tree/master/pagination
現(xiàn)在，我們可以這樣調用它：
<script>
// #pagination-list 是組件的父容器，50 是總頁數(shù)。
$(function () {
$("#pagination-list").pagination(50);
})
</script>
是不是很酸爽呢？
如果繼續(xù)擴展，我們還可以給組件更多的樣式選擇......
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- jquery pagination插件實現(xiàn)無刷新分頁代碼
- jquery.pagination.js 無刷新分頁實現(xiàn)步驟分享
- jquery分頁插件jquery.pagination.js使用方法解析
- Jquery 分頁插件之Jquery Pagination
- PHP框架Laravel插件Pagination實現(xiàn)自定義分頁
- jquery.pagination +JSON 動態(tài)無刷新分頁實現(xiàn)代碼
- jquery插件pagination實現(xiàn)無刷新ajax分頁
- asp.net jquery無刷新分頁插件(jquery.pagination.js)
相關文章
這篇文章主要介紹了JavaScript中的比較操作符>、<、>=、<=介紹,本文先是講解了操作符的一些使用規(guī)則,然后給出了操作實例,需要的朋友可以參考下2014-12-12
input 輸入框內的輸入事件詳細分析,需要的朋友可以參考下。2010-03-03
Javascript createElement和innerHTML增加頁面元素的性能對比
Javascript之createElement和innerHTML增加頁面元素的性能對比2009-09-09
解決遠程頁面抓取中的亂碼問題？...2007-03-03
這篇文章主要給大家介紹了關于微信小程序中獲取用戶手機號授權登錄的詳細步驟,在微信小程序中開發(fā)者可以通過微信提供的API接口實現(xiàn)用戶登錄和獲取用戶的手機號,需要的朋友可以參考下2023-07-07
前端JavaScript數(shù)組方法總結(非常詳細!)
這篇文章主要介紹了JavaScript中數(shù)組對象的常用方法,包括數(shù)組的基本操作、查找、過濾、排序、遍歷等方法,并提供了每個方法的語法和示例,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
淺談layer的Icon樣式以及一些常用的layer窗口使用方法
今天小編就為大家分享一篇淺談layer的Icon樣式以及一些常用的layer窗口使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了原生js實現(xiàn)二級聯(lián)動菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)吸頂盒效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript判斷是否為數(shù)組的3種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)組的3種方法及效率比較,本文直接給出運行效果和實現(xiàn)代碼,需要的朋友可以參考下2015-04-04