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 相关文章推荐
javascript的函数作用域
Nov 12 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
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
destoon之一键登录设置
2014/06/21 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP _construct()函数讲解
2019/02/03 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python socket编程实例详解
2015/05/27 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python解析xml简单示例
2019/06/21 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
简单介绍django提供的加密算法
2019/12/18 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
2014年客房部工作总结
2014/11/22 职场文书
介绍信怎么写
2015/01/30 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android