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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
使用 Element UI Table 的 slot-scope方法
Oct 10 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
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python切片用法实例教程
2014/09/08 Python
python实现识别相似图片小结
2016/02/22 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python中logging包的使用总结
2018/02/28 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
python中的django是做什么的
2020/07/31 Python
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
团队精神演讲稿
2013/12/31 职场文书
大学新生军训感言
2014/02/25 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
机关出纳岗位职责
2014/04/03 职场文书
单位委托书怎么写
2014/09/21 职场文书
面试感谢信范文
2015/01/22 职场文书
神秘岛读书笔记
2015/07/01 职场文书
运动会开幕式致辞
2015/07/29 职场文书