js实现简单分页导航栏效果


Posted in Javascript onJune 28, 2019

本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下

最终的效果: 

js实现简单分页导航栏效果

1. 分页需要的几个重要参数:

总记录条数: totalCount (查数据库)

每页记录数: pageSize  (自己设置)

总页数: totalPageNum  (根据上面的参数计算) 

当前页: currentPageNum (前台传入)

当前页要显示的内容 : List<PageInfo> (查数据库: pageSize和currentPageNum每页的计算起始记录索引  

2. 在html页面中添加分页导航条的<DIV>

<body>
 <!--分页导航条 -->
 <div class="page" id="pag" align="center">
 <!--<a href="javascript:void(0);" onclick="js_method($(this).html())">4</a> -->
 </div>
</body>

3. 编写分页逻辑的js

<script type="text/javascript">
 $(function () { 
 //这里通过ajax查询到总记录数totalCount
 //设定每页显示记录数pageSize,算出总页数totalPageNum
  js_method(1,10);
 });
 /**
 * 传入当前页和和总页数
 */
 function js_method(currentPageNum,totalPageNum) {
 currentPageNum = Number(currentPageNum);
  var startPageNum = currentPageNum - 2; //起始页
  var endPageNum = currentPageNum + 2; //结束页
  $("#pag").text("") //清空导航条
  if (startPageNum <= 0) {
  startPageNum = 1
  endPageNum = startPageNum + 4
  }
  if (endPageNum > totalPageNum) {
  endPageNum = totalPageNum
  startPageNum = endPageNum - 4
  }
 
  if (currentPageNum != 1) {
  $("#pag").append(
 "<a href='javascript:void(0);' onclick='js_method(1,"+totalPageNum+")' >首页</a>"
 )
  $("#pag").append(
  "<a href='javascript:void(0);' onclick='js_method($(\".active\").text()-1,"+totalPageNum+")' id='prePageNum'>«</a>"
 )
  }
  for (var i = 0; i <= endPageNum; i++) {
  if (i >= startPageNum) {
 
   if (i == currentPageNum) {
   var ele = "<a href='javascript:void(0);' class='active' onclick='js_method($(this).text(),"+totalPageNum+")' >" +
    i + "</a>"
   } else {
   var ele = "<a href='javascript:void(0);' onclick='js_method($(this).text(),"+totalPageNum+")' >" + i + "</a>"
   }
  }
  $("#pag").append(ele)
  }
  if (currentPageNum != totalPageNum) {
  $("#pag").append(
   "<a href='javascript:void(0);' onclick='js_method(Number($(\".active\").text())+1,"+totalPageNum+")' id='prePageNum' rel='pre'>»</a>"
  )
 $("#pag").append(
 "<a href='javascript:void(0);' onclick='js_method(10,"+totalPageNum+")' >尾页</a>"
 )
  }
 //在这里通过ajax去查询当前页的数据
 }
 </script>

4. 添加css样式

.page {
 height: 34px;
 line-height: 34px;
 }
.page a {
 display: inline-block;
 border: 1px solid #ededed;
 padding: 0 12px;
 color: #3e3e3e;
 font-size: 14px;
 font-family: tahoma,simsun;
 text-decoration: none;
 }
.page a:hover {
 color: #f40;
 border-color: #f40;
 }
.page .active,.page .active:hover {
 color: #fff;
 background: #f40;
 border: solid 1px #f40;
}

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

Javascript 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 #Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 #Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 #Javascript
微信小程序身份证验证方法实现详解
Jun 28 #Javascript
jQuery属性选择器用法实例分析
Jun 28 #jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
You might like
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
如何利用Python 进行边缘检测
2020/10/14 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
优秀求职信范文分享
2014/01/26 职场文书
面试自我评价范文
2014/09/17 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
保研推荐信格式
2015/03/25 职场文书
2015年度保密工作总结
2015/04/24 职场文书
赞助商致辞
2015/07/30 职场文书
如何用python插入独创性声明
2021/03/31 Python
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js