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 相关文章推荐
JQuery验证工具类搜集整理
Jan 16 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
vue3中provide && inject的使用
Jul 01 Vue.js
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 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
使用python实现ANN
2017/12/20 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python中with用法讲解
2020/02/07 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
如何在存储过程中使用Loop
2016/01/05 面试题
全神贯注教学反思
2014/02/03 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
模范家庭事迹材料
2014/02/10 职场文书
写给导师的自荐信
2015/03/06 职场文书
检讨书模板大全
2015/05/07 职场文书
庆七一晚会主持词
2015/06/30 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS