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 相关文章推荐
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
js实现购物车功能
Jun 12 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
详解Vue router路由
Nov 20 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
微信小程序文章详情页面实现代码
2018/09/10 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python利用faker库批量生成测试数据
2020/10/15 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
一套Java笔试题
2016/08/20 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2016年情人节广告语
2016/01/28 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
财产分割协议书
2016/03/22 职场文书