JS实现分页导航效果


Posted in Javascript onFebruary 19, 2020

前言

最近的项目需要添加一个分页导航的功能,没有用网上封装好的文件。通过JS自己简单实现了效果。下面和大家分享一下。

内容

下图为首次加载后的效果,默认显示5页,

JS实现分页导航效果

当点击下一页时将选中页面的页码置于中间

JS实现分页导航效果

下面让我们来看看实现的代码

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

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();
      }
     })
    }
  }
}

小结

一个小小的功能,在实现的过程中并不容易不断的调试和优化才让这样的需求得到了合理的实现。但敲代码中也让我更多的感受到了页面导航中所需要考虑到的多元素设计。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
vue随机验证码组件的封装实现
Feb 19 #Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 #Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 #Javascript
Vue.js仿Select下拉框效果
Feb 18 #Javascript
JavaScript中的惰性载入函数及优势
Feb 18 #Javascript
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
vue微信分享插件使用方法详解
Feb 18 #Javascript
You might like
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
Python实现CET查分的方法
2015/03/10 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
个人授权委托书范本
2014/09/14 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
php实例化对象的实例方法
2021/11/17 PHP
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
Golang 遍历二叉树
2022/04/19 Golang