使用JavaScript怎么实现一个分页导航效果-创新互联

使用JavaScript怎么实现一个分页导航效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

成都创新互联公司于2013年创立,先为东安等服务建站,东安等地企业,进行企业商务咨询服务。为东安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

第一部分是在页面显示内容的处理

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 += "";
       }
       else {
        li_list += "";
       }
       li_list += "";
       li_list += "姓名";
       li_list += "手机号码";
       li_list += "邮箱";
       li_list += " ";
       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 += "";
        li_list += "" + Name + "";
        li_list += "" + PhoneNO + "";
        li_list += "" + Email + "";
        li_list += " ";
       }
       li_list += "";
      }
     }     
    }
  });
}

第二部分是动态的设置页码并添加页码导航的方法

function SetPageCount(count) {
   if (count > 0) {  //设置动态页码
    var li_list = "";
    li_list += "
    ";     li_list += "上一页";     li_list += "
    • ";     li_list += "1";     for (var i = 2; i <= count; i++) {      if (i <= 5) {       li_list += "" + i + "";      } else {       li_list += "" + i + "";      }     }     li_list += "
  • ";     li_list += "下一页";     li_list += "
";     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();       }      })     }   } }

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


分享题目:使用JavaScript怎么实现一个分页导航效果-创新互联
URL分享:http://scyanting.com/article/hipij.html