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 类型转换方法
Oct 24 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
爬虫利器Puppeteer实战
Jan 09 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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摘要生成函数(无乱码)
2012/02/04 PHP
php 文件上传实例代码
2012/04/19 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
jQuery入门知识简介
2010/03/04 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
简单了解python中的与或非运算
2019/09/18 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
学校四群教育实施方案
2014/06/12 职场文书
微笑服务标语
2014/06/24 职场文书
个人股份合作协议书
2014/10/24 职场文书
务虚会发言材料
2014/12/25 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android