成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡(jiǎn)單的分頁(yè)

Flands / 1692人閱讀

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

原文鏈接

編程，很重要的一個(gè)技能就是抽象能力，就是現(xiàn)實(shí)中的瑣事，我怎么用代碼來表示。
一、簡(jiǎn)單的分頁(yè)需求

當(dāng)前頁(yè)碼前后顯示3頁(yè)，然后需要顯示第一頁(yè)以及最后一頁(yè)

未顯示的頁(yè)碼用省略號(hào)"..."表示

舉例如下：

當(dāng)前頁(yè)碼為1，那么顯示1 2 3 4 ... 110 下一頁(yè)

當(dāng)前頁(yè)碼為2，那么顯示上一頁(yè) 1 2 3 4 5 ... 110 下一頁(yè)

當(dāng)前頁(yè)碼為3，那么顯示上一頁(yè) 1 2 3 4 5 6 ... 110 下一頁(yè)

當(dāng)前頁(yè)碼為4，那么顯示上一頁(yè) 1 2 3 4 5 6 7 ... 110 下一頁(yè)

當(dāng)前頁(yè)碼為5，那么顯示上一頁(yè) 1 2 3 4 5 6 7 8 ... 110 下一頁(yè)

當(dāng)前頁(yè)碼為6，那么顯示上一頁(yè) 1 ... 3 4 5 6 7 8 9 ... 110 下一頁(yè)

...

當(dāng)前頁(yè)碼為100，那么顯示上一頁(yè) 1 ... 97 98 99 100 101 102 103 ... 110 下一頁(yè)

...

當(dāng)前頁(yè)碼為109，那么顯示上一頁(yè) 1 ... 106 107 108 109 110 下一頁(yè)

當(dāng)前頁(yè)碼為110，那么顯示上一頁(yè) 1 ... 106 107 108 109 110

二、思路分析

不考慮超鏈接，我們可以將需求抽象出來。可以將這個(gè)需求簡(jiǎn)單成一個(gè)字符輸出問題

要求：

輸入兩個(gè)參數(shù)，當(dāng)前頁(yè)數(shù)page以及總頁(yè)數(shù)total

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

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

function showPage(page, total){

}

過程：

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

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

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

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

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

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

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

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

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

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

  if(page - 3 > 1){ //判斷頁(yè)碼左邊是否添加"..."
    str = "... " + str;
  }

  if(page + 3 < total){
    str = str + "... ";
  }

  return str;
}

好像遺漏了什么。。。哦，我想起來了，我們忘記添加第一頁(yè)跟最后一頁(yè)了！

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

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

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

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

  if(page - 3 > 1){ //判斷頁(yè)碼左邊是否添加"..."
    str = "... " + str;
  }

  if(page > 1) {
    str = "上一頁(yè) " + "1 " + str;
  }

  if(page + 3 < total){
    str = str + "...";
  }

  if(page < total){
    str = str + " " + total + " 下一頁(yè)";
  }

  return str;
}

咦，看上去好了。但總感覺缺點(diǎn)什么~~~

三、測(cè)試用例

哦，想起來了，我們忘記寫測(cè)試用例了。那我們來一個(gè)簡(jiǎn)單粗暴的吧~

var total = 110;
for(var i = 1; i <= total; i++){
  var ret = showPage(i, total);
  console.log(ret);
}

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86710.html

相關(guān)文章

  • 基于游標(biāo)的分頁(yè)接口實(shí)現(xiàn)

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

    godruoyi 評(píng)論0 收藏0

  • jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁(yè)過程

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

    Rainie 評(píng)論0 收藏0

  • jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁(yè)過程

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

    array_huang 評(píng)論0 收藏0

  • 懶加載實(shí)現(xiàn)的分頁(yè)&&網(wǎng)站footer自適應(yīng)

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

    neu 評(píng)論0 收藏0

  • 懶加載實(shí)現(xiàn)的分頁(yè)&&網(wǎng)站footer自適應(yīng)

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

    tigerZH 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<