前言

最近的專案需要新增一個分頁導航的功能，沒有用網上封裝好的檔案。通過JS自己簡單實現了效果。下面和大家分享一下。

內容

下圖為首次載入後的效果，預設顯示5頁，

當點選下一頁時將選中頁面的頁碼置於中間

下面讓我們來看看實現的程式碼

第一部分是在頁面顯示內容的處理

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);     //轉換Json物件
      var pagesize = 6;        //設定每頁顯示數
      var pagecount = Math.ceil(cc.length / pagesize); //獲取頁數
      SetPageCount(pagecount);      //設定跳轉頁籤
      for (var j = 0,l = pagecount; j < l; j++) {  //設定頁面內容
       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>手機號碼</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>";
      }
     }     
    }
  });
}

第二部分是動態的設定頁碼並新增頁碼導航的方法

function SetPageCount(count) {
   if (count > 0) {  //設定動態頁碼
    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 () { //新增新增分頁導航的事件
      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();
      }
     })
    }
  }
}

小結

一個小小的功能，在實現的過程中並不容易不斷的除錯和優化才讓這樣的需求得到了合理的實現。但敲程式碼中也讓我更多的感受到了頁面導航中所需要考慮到的多元素設計。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。