摘要:哦,我想起來了,我們忘記添加第一頁跟最后一頁了首先記錄傳入的頁碼數字判斷所傳頁碼之前添加的頁碼數判斷所傳頁碼之后添加的頁碼數判斷頁碼左邊是否添加上一頁下一頁咦,看上去好了。那我們來一個簡單粗暴的吧
原文鏈接
一、簡單的分頁需求</>復制代碼
編程,很重要的一個技能就是抽象能力,就是現實中的瑣事,我怎么用代碼來表示。
當前頁碼前后顯示3頁,然后需要顯示第一頁以及最后一頁
未顯示的頁碼用省略號"..."表示
舉例如下:
當前頁碼為1,那么顯示1 2 3 4 ... 110 下一頁
當前頁碼為2,那么顯示上一頁 1 2 3 4 5 ... 110 下一頁
當前頁碼為3,那么顯示上一頁 1 2 3 4 5 6 ... 110 下一頁
當前頁碼為4,那么顯示上一頁 1 2 3 4 5 6 7 ... 110 下一頁
當前頁碼為5,那么顯示上一頁 1 2 3 4 5 6 7 8 ... 110 下一頁
當前頁碼為6,那么顯示上一頁 1 ... 3 4 5 6 7 8 9 ... 110 下一頁
...
當前頁碼為100,那么顯示上一頁 1 ... 97 98 99 100 101 102 103 ... 110 下一頁
...
當前頁碼為109,那么顯示上一頁 1 ... 106 107 108 109 110 下一頁
當前頁碼為110,那么顯示上一頁 1 ... 106 107 108 109 110
二、思路分析不考慮超鏈接,我們可以將需求抽象出來。可以將這個需求簡單成一個字符輸出問題
要求:
輸入兩個參數,當前頁數page以及總頁數total
輸出符合上述要求的字符串
可以考慮先定義一個函數showPage
</>復制代碼
function showPage(page, total){
}
過程:
首先,我們來解決最普遍的需求:頁數左右各添加3個頁碼
</>復制代碼
function showPage(page, total){
var str = page; //首先記錄傳入的頁碼數字
for(var i = 1; i <= 3; i++){
if(page - i > 1){ //判斷所傳頁碼之前添加的頁碼數
str = page - i + " " + str;
}
if(page + i < total){ //判斷所傳頁碼之后添加的頁碼數
str = str + " " + (page+i);
}
}
}
再來解決左邊是否添加...
</>復制代碼
function showPage(page, total){
var str = page; //首先記錄傳入的頁碼數字
for(var i = 1; i <= 3; i++){
if(page - i > 1){ //判斷所傳頁碼之前添加的頁碼數
str = page - i + " " + str;
}
if(page + i < total){ //判斷所傳頁碼之后添加的頁碼數
str = str + " " + (page+i);
}
}
if(page - 3 > 1){ //判斷頁碼左邊是否添加"..."
str = "... " + str;
}
if(page + 3 < total){
str = str + "... ";
}
return str;
}
好像遺漏了什么。。。哦,我想起來了,我們忘記添加第一頁跟最后一頁了!
</>復制代碼
function showPage(page, total){
var str = page; //首先記錄傳入的頁碼數字
for(var i = 1; i <= 3; i++){
if(page - i > 1){ //判斷所傳頁碼之前添加的頁碼數
str = page - i + " " + str;
}
if(page + i < total){ //判斷所傳頁碼之后添加的頁碼數
str = str + " " + (page+i);
}
}
if(page - 3 > 1){ //判斷頁碼左邊是否添加"..."
str = "... " + str;
}
if(page > 1) {
str = "上一頁 " + "1 " + str;
}
if(page + 3 < total){
str = str + "...";
}
if(page < total){
str = str + " " + total + " 下一頁";
}
return str;
}
咦,看上去好了。但總感覺缺點什么~~~
三、測試用例哦,想起來了,我們忘記寫測試用例了。那我們來一個簡單粗暴的吧~
</>復制代碼
var total = 110;
for(var i = 1; i <= total; i++){
var ret = showPage(i, total);
console.log(ret);
}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86710.html
摘要:游標條數的分頁接口實現命令用于迭代數據庫中所有的,但是因為數據中的數量是不能確定的,線上直接執行會被打死的,而且的數量在你操作的過程中也是時刻在變化的,可能有的被刪除,可能期間又有新增的。 分頁接口的實現,在偏業務的服務端開發中應該很常見,PC時代的各種表格,移動時代的各種feed流、timeline。 出于對流量的控制,或者用戶的體驗,大批量的數據都不會直接返回給客戶端,而是通過...
摘要:在涉及到組件的分頁功能時,遇到了一點問題。由于數據較多,這邊不予展示。返回的數據必須是符合要求的數據,格式如下必須帶有屬性,屬性值為總共的數據條數,是這一頁的數據內容,以數組對象的形式返回。 第一次寫技術方面的文章,有點忐忑,總怕自己講的不對誤導別人。但是萬事總有個開頭,有不足錯誤之處,請各位讀者老爺指出。 言歸正傳,最近剛進新公司,上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...
摘要:在涉及到組件的分頁功能時,遇到了一點問題。由于數據較多,這邊不予展示。返回的數據必須是符合要求的數據,格式如下必須帶有屬性,屬性值為總共的數據條數,是這一頁的數據內容,以數組對象的形式返回。 第一次寫技術方面的文章,有點忐忑,總怕自己講的不對誤導別人。但是萬事總有個開頭,有不足錯誤之處,請各位讀者老爺指出。 言歸正傳,最近剛進新公司,上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...
摘要:最近在做手機端,發現下拉刷新和上拉加載的控件很少而且自我感覺不好用,比如之類然后自己寫了個懶加載的,也很簡單,最基礎的代碼不喜勿噴,但蠻實用的手機端懶加載分頁用之前先引用下這里的表示距離底部像素觸發,可自行調節第頁這里放你的分頁代碼這是刷 最近在做手機端,發現下拉刷新和上拉加載的jq控件很少而且自我感覺不好用,比如iscroll之類…… 然后自己寫了個懶加載的,也很簡單,最基礎的代碼【...
摘要:最近在做手機端,發現下拉刷新和上拉加載的控件很少而且自我感覺不好用,比如之類然后自己寫了個懶加載的,也很簡單,最基礎的代碼不喜勿噴,但蠻實用的手機端懶加載分頁用之前先引用下這里的表示距離底部像素觸發,可自行調節第頁這里放你的分頁代碼這是刷 最近在做手機端,發現下拉刷新和上拉加載的jq控件很少而且自我感覺不好用,比如iscroll之類…… 然后自己寫了個懶加載的,也很簡單,最基礎的代碼【...
閱讀 2566·2021-11-23 09:51
閱讀 3361·2021-11-22 15:22
閱讀 1874·2021-11-18 13:22
閱讀 2260·2021-09-24 09:48
閱讀 1313·2019-08-29 13:58
閱讀 1303·2019-08-26 13:39
閱讀 2448·2019-08-26 10:48
閱讀 3036·2019-08-26 10:21