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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
js简单抽奖代码
Jan 16 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
微信小程序倒计时功能实例代码
Jul 17 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
js 内存释放问题
2010/04/25 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
Python函数学习笔记
2008/10/07 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python实现按行分割文件
2019/07/22 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
美的官方商城:Midea
2016/09/14 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
求职信格式范文
2015/03/19 职场文书
稽核岗位职责范本
2015/04/13 职场文书
百年孤独读书笔记
2015/06/29 职场文书
活动新闻稿范文
2015/07/17 职场文书
聘任书格式及范文
2015/09/21 职场文书