簡單的分頁

Flands 發(fā)布于2019-08-21 11:26 / 1738人閱讀

摘要：哦，我想起來了，我們忘記添加第一頁跟最后一頁了首先記錄傳入的頁碼數(shù)字判斷所傳頁碼之前添加的頁碼數(shù)判斷所傳頁碼之后添加的頁碼數(shù)判斷頁碼左邊是否添加上一頁下一頁咦，看上去好了。那我們來一個簡單粗暴的吧

原文鏈接

編程，很重要的一個技能就是抽象能力，就是現(xiàn)實中的瑣事，我怎么用代碼來表示。

一、簡單的分頁需求

當前頁碼前后顯示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

二、思路分析

不考慮超鏈接，我們可以將需求抽象出來?？梢詫⑦@個需求簡單成一個字符輸出問題

要求：

輸入兩個參數(shù)，當前頁數(shù)page以及總頁數(shù)total

輸出符合上述要求的字符串

可以考慮先定義一個函數(shù)showPage

function showPage(page, total){

}

過程：

首先，我們來解決最普遍的需求：頁數(shù)左右各添加3個頁碼

function showPage(page, total){
  var str = page; //首先記錄傳入的頁碼數(shù)字

  for(var i = 1; i <= 3; i++){

    if(page - i > 1){ //判斷所傳頁碼之前添加的頁碼數(shù)
      str = page - i + " " + str;
    }

    if(page + i < total){ //判斷所傳頁碼之后添加的頁碼數(shù)
      str = str + " " + (page+i);
    }
  }
}

再來解決左邊是否添加...

function showPage(page, total){
  var str = page; //首先記錄傳入的頁碼數(shù)字

  for(var i = 1; i <= 3; i++){

    if(page - i > 1){ //判斷所傳頁碼之前添加的頁碼數(shù)
      str = page - i + " " + str;
    }

    if(page + i < total){ //判斷所傳頁碼之后添加的頁碼數(shù)
      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; //首先記錄傳入的頁碼數(shù)字

  for(var i = 1; i <= 3; i++){

    if(page - i > 1){ //判斷所傳頁碼之前添加的頁碼數(shù)
      str = page - i + " " + str;
    }

    if(page + i < total){ //判斷所傳頁碼之后添加的頁碼數(shù)
      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);
}

云服務器 GPU云服務器 html的分頁 jstl的分頁存儲過程的分頁 js的分頁代碼

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/86710.html

基于游標的分頁接口實現(xiàn)

摘要：游標條數(shù)的分頁接口實現(xiàn)命令用于迭代數(shù)據(jù)庫中所有的，但是因為數(shù)據(jù)中的數(shù)量是不能確定的，線上直接執(zhí)行會被打死的，而且的數(shù)量在你操作的過程中也是時刻在變化的，可能有的被刪除，可能期間又有新增的。分頁接口的實現(xiàn)，在偏業(yè)務的服務端開發(fā)中應該很常見，PC時代的各種表格，移動時代的各種feed流、timeline。出于對流量的控制，或者用戶的體驗，大批量的數(shù)據(jù)都不會直接返回給客戶端，而是通過...

godruoyi 2019-08-23 13:06 評論0 收藏0
jq easyui數(shù)據(jù)網(wǎng)絡的分頁過程

摘要：在涉及到組件的分頁功能時，遇到了一點問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對象的形式返回。第一次寫技術方面的文章，有點忐忑，總怕自己講的不對誤導別人。但是萬事總有個開頭，有不足錯誤之處，請各位讀者老爺指出。言歸正傳，最近剛進新公司，上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...

Rainie 2019-08-21 10:53 評論0 收藏0
jq easyui數(shù)據(jù)網(wǎng)絡的分頁過程

摘要：在涉及到組件的分頁功能時，遇到了一點問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對象的形式返回。第一次寫技術方面的文章，有點忐忑，總怕自己講的不對誤導別人。但是萬事總有個開頭，有不足錯誤之處，請各位讀者老爺指出。言歸正傳，最近剛進新公司，上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...

array_huang 2019-08-01 15:21 評論0 收藏0
懶加載實現(xiàn)的分頁&&網(wǎng)站footer自適應

摘要：最近在做手機端，發(fā)現(xiàn)下拉刷新和上拉加載的控件很少而且自我感覺不好用，比如之類然后自己寫了個懶加載的，也很簡單，最基礎的代碼不喜勿噴，但蠻實用的手機端懶加載分頁用之前先引用下這里的表示距離底部像素觸發(fā)，可自行調(diào)節(jié)第頁這里放你的分頁代碼這是刷最近在做手機端，發(fā)現(xiàn)下拉刷新和上拉加載的jq控件很少而且自我感覺不好用，比如iscroll之類…… 然后自己寫了個懶加載的，也很簡單，最基礎的代碼【...

neu 2019-08-20 13:45 評論0 收藏0
懶加載實現(xiàn)的分頁&&網(wǎng)站footer自適應

摘要：最近在做手機端，發(fā)現(xiàn)下拉刷新和上拉加載的控件很少而且自我感覺不好用，比如之類然后自己寫了個懶加載的，也很簡單，最基礎的代碼不喜勿噴，但蠻實用的手機端懶加載分頁用之前先引用下這里的表示距離底部像素觸發(fā)，可自行調(diào)節(jié)第頁這里放你的分頁代碼這是刷最近在做手機端，發(fā)現(xiàn)下拉刷新和上拉加載的jq控件很少而且自我感覺不好用，比如iscroll之類…… 然后自己寫了個懶加載的，也很簡單，最基礎的代碼【...

tigerZH 2019-08-01 16:12 評論0 收藏0