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 showModalDialog 内跳转页面的问题
Nov 25 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
Vue函数式组件的应用实例详解
Aug 30 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实现文件上传二法
2006/10/09 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
js验证表单大全
2006/11/25 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
理解javascript中的闭包
2017/01/11 Javascript
vue组件学习教程
2017/09/09 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
JS三级联动代码格式实例详解
2019/12/30 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
工厂门卫岗位职责
2013/11/25 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
个人年终总结开头
2015/03/06 职场文书
婚庆司仪开场白
2015/05/29 职场文书
Java版 单机五子棋
2022/05/04 Java/Android