久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

jQuery怎么實(shí)現(xiàn)一個(gè)分頁(yè)組件功能

小編這次要給大家分享的是jQuery怎么實(shí)現(xiàn)一個(gè)分頁(yè)組件功能，文章內(nèi)容豐富，感興趣的小伙伴可以來(lái)了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)永寧,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

開始一個(gè)組件，毫無(wú)目的的寫代碼是一個(gè)不好的習(xí)慣，要經(jīng)歷 分析 => 抽象 => 實(shí)現(xiàn) => 應(yīng)用 四個(gè)階段。

組件DEMO地址：https://github.com/CaptainLiao/zujian/tree/master/pagination

  • 分析需求

當(dāng)前頁(yè)碼顯示前后三頁(yè)，以及在兩端顯示上一頁(yè)、下一頁(yè)

未顯示的地方用 ‘...'代替

舉個(gè)栗子：

假設(shè)總共有30頁(yè)

當(dāng)前為第一頁(yè)：1 2 3 4 ... 30 下一頁(yè)

當(dāng)前為第二頁(yè)：上一頁(yè) 1 2 3 4 5 ... 30 下一頁(yè)

當(dāng)前為第三頁(yè)：上一頁(yè) 1 2 3 4 5 6 ... 30 下一頁(yè)
.

當(dāng)前為第6頁(yè)：上一頁(yè) 1 ... 3 4 5 6 7 8 9 ... 30 下一頁(yè)
.

當(dāng)前為第29頁(yè)：上一頁(yè) 1 ... 26 27 28 29 30 下一頁(yè)

當(dāng)前為第30頁(yè)：上一頁(yè) 1 ... 27 28 29 30

  • 抽象

分析上面的例子，發(fā)現(xiàn)決定輸出的因素有兩個(gè)：當(dāng)前頁(yè)碼和總頁(yè)數(shù)。

于是，我們?cè)O(shè)定一個(gè)函數(shù)用來(lái)表示當(dāng)前頁(yè)碼的顯示內(nèi)容：

/**
 * @param {Number} page 當(dāng)前頁(yè)
 * @param {Number} totalPage 總頁(yè)數(shù) 
 */
function pagination(page, totalPage) {
  var str = '';
  // todo...

  return str;
}

// 運(yùn)行函數(shù)，打印出值

var ret = pagination(4, 30)

console.log(ret)

>上一頁(yè) 1 2 3 4 5 6 7 ... 30 下一頁(yè)
  • 實(shí)現(xiàn)

輸入和輸出都有了，接著正式開始擼：

function pagination(page, totalPage) {
  var str = page;
  // 這里實(shí)現(xiàn)當(dāng)前頁(yè)面顯示前后三項(xiàng)功能
  for(var i=1; i< totalPage; i++) {
    if(page-i>1) {
      str = page-i +' '+ str;
    }
    if(page + i < totalPage) {
      str = str + ' ' + (page+i)
    }
  }

  // 以page為中心，向左右擴(kuò)展

  // 向左，先判斷當(dāng)前page向左的第四個(gè)數(shù)是否大于 1
  if(page-4 > 1) {
    str = '... ' + page;
  }
  // 繼續(xù)向左判斷
  if(page >1) {
    str = "上一頁(yè)" + '... ' +1 +' ' +str;
  }
  // 向右，判斷當(dāng)前page向右的第四個(gè)數(shù)字是否小于 totalPage
  if(page + 4 < totalPage) {
    str = '... '+ str;
  }
  if(page < totalPage) {
    str = str +' ' + totalPage +' '+ '下一頁(yè)';
  }
  return str;
}

現(xiàn)在，我們可以執(zhí)行下面的函數(shù)，取得我們想要的結(jié)果：

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

至此，我們已經(jīng)實(shí)現(xiàn)了分頁(yè)的邏輯。

  • 應(yīng)用

接下來(lái)的應(yīng)用就非常簡(jiǎn)單了，不外乎是給str 加一些標(biāo)簽和class，于是我們就得到了一個(gè)分頁(yè)組件：

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">上一頁(yè)</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">下一頁(yè)</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));
    });

看看效果吧：
jQuery怎么實(shí)現(xiàn)一個(gè)分頁(yè)組件功能
jQuery怎么實(shí)現(xiàn)一個(gè)分頁(yè)組件功能

目前來(lái)說(shuō)，進(jìn)展順利，但是！還有很多需要優(yōu)化的地方：樣式固定，不能自由更改；初始化和交互混雜在一起，沒有對(duì)代碼進(jìn)行封裝...

又經(jīng)過一番折騰，這個(gè)分頁(yè)組件終于完成，下載demo：

https://github.com/CaptainLiao/zujian/tree/master/pagination

現(xiàn)在，我們可以這樣調(diào)用它：

<script>
  // #pagination-list 是組件的父容器，50 是總頁(yè)數(shù)。
  $(function () {
    $("#pagination-list").pagination(50);
  })
</script>

是不是很酸爽呢？

如果繼續(xù)擴(kuò)展，我們還可以給組件更多的樣式選擇......

看完這篇關(guān)于jQuery怎么實(shí)現(xiàn)一個(gè)分頁(yè)組件功能的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

當(dāng)前題目：jQuery怎么實(shí)現(xiàn)一個(gè)分頁(yè)組件功能
標(biāo)題鏈接：http://sd-ha.com/article28/josdcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、微信公眾號(hào)、動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、企業(yè)建站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作