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 相关文章推荐
向左滚动文字 js代码效果
Aug 17 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
什么是SOLID
Mar 24 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
2.PHP入门
2006/10/09 PHP
在Windows版的PHP中使用ADO
2006/10/09 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
基于Python解密仿射密码
2019/10/21 Python
python颜色随机生成器的实例代码
2020/01/10 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
建筑学推荐信
2013/11/03 职场文书
毕业生自荐书
2013/12/18 职场文书
网络技术专业求职信
2014/05/02 职场文书
公务员诚信承诺书
2014/05/26 职场文书
服装设计专业自荐信
2014/06/17 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers