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 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Vue分页组件实例代码
Apr 17 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
在vue中使用Base64转码的案例
Aug 07 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
一段实用的php验证码函数
2016/05/19 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
毕业自我鉴定范文
2013/11/06 职场文书
培训演讲稿范文
2014/01/12 职场文书
教师申诉制度
2014/01/29 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
机动车登记业务委托书
2014/10/08 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书