JS實(shí)現(xiàn)分頁導(dǎo)航效果

更新時(shí)間：2020年02月19日 08:36:58 作者：格林希爾

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)動(dòng)態(tài)頁碼及分頁導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

最近的項(xiàng)目需要添加一個(gè)分頁導(dǎo)航的功能，沒有用網(wǎng)上封裝好的文件。通過JS自己簡(jiǎn)單實(shí)現(xiàn)了效果。下面和大家分享一下。

內(nèi)容

下圖為首次加載后的效果，默認(rèn)顯示5頁，

當(dāng)點(diǎn)擊下一頁時(shí)將選中頁面的頁碼置于中間

下面讓我們來看看實(shí)現(xiàn)的代碼

第一部分是在頁面顯示內(nèi)容的處理

function SetListPage() {
   $.ajax({
    type: "GET",
    url: "ajax/PhoneList.ashx?",
    datatype: 'json',
    success: function (data, textStatus) {
     var li_list = "";
     if (data != "") {
      var cc = jQuery.parseJSON(data);     //轉(zhuǎn)換Json對(duì)象
      var pagesize = 6;        //設(shè)置每頁顯示數(shù)
      var pagecount = Math.ceil(cc.length / pagesize); //獲取頁數(shù)
      SetPageCount(pagecount);      //設(shè)置跳轉(zhuǎn)頁簽
      for (var j = 0, l = pagecount; j < l; j++) {  //設(shè)置頁面內(nèi)容
       if (j == 0) {
        li_list += "<table class='phonetable' >";
       }
       else {
        li_list += "<table class='phonetable hide'>";
       }
       li_list += "<tr>";
       li_list += "<th>姓名</th>";
       li_list += "<th>手機(jī)號(hào)碼</th>";
       li_list += "<th>郵箱</th>";
       li_list += "</tr> ";
       var index = j * pagesize;
       var rowcount = j * pagesize + pagesize;
       if (rowcount > cc.length) {
        rowcount = cc.length;
       }
       for (var i = index; i < rowcount; i++) {
        var Name = cc[i]['Name'];
        var PhoneNO = cc[i]['PhoneNO'];
        var Email = cc[i]['Email'];
        li_list += "<tr>";
        li_list += "<td>" + Name + "</td>";
        li_list += "<td>" + PhoneNO + "</td>";
        li_list += "<td>" + Email + "</td>";
        li_list += "</tr> ";
       }
       li_list += "</table>";
      }
     }     
    }
  });
}

第二部分是動(dòng)態(tài)的設(shè)置頁碼并添加頁碼導(dǎo)航的方法

function SetPageCount(count) {
   if (count > 0) {  //設(shè)置動(dòng)態(tài)頁碼
    var li_list = "";
    li_list += "<ul>";
    li_list += "<li id='01preage'><a class='prev'><span></span>上一頁</a></li>";
    li_list += "<li><ul>";
    li_list += "<li class='01pageIndex'><a class='active'>1</a></li>";
    for (var i = 2; i <= count; i++) {
     if (i <= 5) {
      li_list += "<li class='01pageIndex'><a>" + i + "</a></li>";
     } else {
      li_list += "<li class='01pageIndex'><a style='display: none;'>" + i + "</a></li>";
     }
    }
    li_list += "</ul></li>";
    li_list += "<li id='01nextage'><a>下一頁<span></span></a></li>";
    li_list += "</ul>";
    if (li_list != null && li_list.length > 0) {
     $("#PhonePageCount").html(li_list);
     $('.01pageIndex a').click(function () { //添加添加分頁導(dǎo)航的事件
      var pagecounts = $('.01pageIndex a').length;
      $(this).addClass('active');
      $(this).parent().siblings().find('a').removeClass('active');
      var index = $(this).parent().index() || 0;
      if (1 < index && index < pagecounts - 2) {
       $('.01pageIndex a').hide()
       $('.01pageIndex a').eq(index - 2).show();
       $('.01pageIndex a').eq(index - 1).show();
       $('.01pageIndex a').eq(index).show();
       $('.01pageIndex a').eq(index + 1).show();
       $('.01pageIndex a').eq(index + 2).show();
      }
      $('#phonelist>table').siblings().hide();
      $('#phonelist>table').eq(index).show();
     })
     $('#01preage').click(function () {
      var currentPageIndex = $('.01pageIndex').find("a[class$='active']").parent().index();
      var pagecounts = $('.01pageIndex a').length;
      if (currentPageIndex > 0) {
       var thisobj = $('.01pageIndex a').eq(currentPageIndex - 1);
       thisobj.addClass('active');
       thisobj.parent().siblings().find('a').removeClass('active');
       if (0 < currentPageIndex && currentPageIndex < pagecounts - 3) {
        $('.01pageIndex a').hide()
        $('.01pageIndex a').eq(currentPageIndex - 3).show();
        $('.01pageIndex a').eq(currentPageIndex - 2).show();
        $('.01pageIndex a').eq(currentPageIndex - 1).show();
        $('.01pageIndex a').eq(currentPageIndex).show();
        $('.01pageIndex a').eq(currentPageIndex + 1).show();
       }
       $('#phonelist>table').siblings().hide();
       $('#phonelist>table').eq(currentPageIndex - 1).show();
      }
     })
     $('#01nextage').click(function () {
      var currentPageIndex = $('.01pageIndex').find("a[class$='active']").parent().index();
      var pagecount = $('.01pageIndex a').length - 1;
      var pagecounts = $('.01pageIndex a').length;
      if (pagecount > currentPageIndex) {
       var thisobj = $('.01pageIndex').eq(currentPageIndex + 1);
       thisobj.find('a').addClass('active');
       thisobj.siblings().find('a').removeClass('active');
       if (0 < currentPageIndex && currentPageIndex < pagecounts - 3) {
        $('.01pageIndex a').hide()
        $('.01pageIndex a').eq(currentPageIndex - 1).show();
        $('.01pageIndex a').eq(currentPageIndex).show();
        $('.01pageIndex a').eq(currentPageIndex + 1).show();
        $('.01pageIndex a').eq(currentPageIndex + 2).show();
        $('.01pageIndex a').eq(currentPageIndex + 3).show();
       }
       $('#phonelist').siblings().hide();
       $('#phonelist>table').eq(currentPageIndex + 1).show();
      }
     })
    }
  }
}

小結(jié)

一個(gè)小小的功能，在實(shí)現(xiàn)的過程中并不容易不斷的調(diào)試和優(yōu)化才讓這樣的需求得到了合理的實(shí)現(xiàn)。但敲代碼中也讓我更多的感受到了頁面導(dǎo)航中所需要考慮到的多元素設(shè)計(jì)。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: