pageGroup.js实现分页功能


Posted in Javascript onJuly 27, 2019

本文实例为大家分享了pageGroup.js实现分页功能的具体代码,供大家参考,具体内容如下

1.html页面

引入

<link rel="stylesheet" type="text/css" href="/stylesheets/pageGroup.css" >
<script src="/javascripts/web/pageGroup.js" type="text/javascript"></script>
<div id="pageGro" class="cb">
 {{if maxPage>0}}//总页数
 <div class="pageUp">上一页</div>
 <div class="pageList">
 <ul>
 </ul>
</div>
 <div class="pageDown">下一页</div>{{/if}}
 <div id="countPage" style="display:none">{{maxPage}}</div>//总页数
 <div id="nowPage" style="display:none">{{page}}</div>//当前页
 <div id="title" style="display:none">{{title}}</div>//标题
</div>

2.pageGroup.css

/* CSS Document */
/*分页*/
#pageGro{ width:400px; height:25px; margin:0px auto; padding-top:30px;}
#pageGro div,#pageGro div ul li{ font-size:12px; color:#999; line-height:23px; float:left; margin-left:5px;}
#pageGro div ul li{ width:22px; text-align:center; border:1px solid #999; cursor:pointer;}
#pageGro div ul li.on{ color:#fff; background:#3c90d9; border:1px solid #3c90d9;}
#pageGro .pageUp,#pageGro .pageDown{ width:63px; border:1px solid #999; cursor:pointer;}
#pageGro .pageUp{ text-indent:23px; background:url(/images/pageUp.png) 5px 7px no-repeat;}
#pageGro .pageDown{ text-indent:5px; background:url(/images/pageDown.png) 46px 6px no-repeat;}

3.pageGroup.js

// JavaScript Document
$(function(){
 //根据总页数判断,如果小于5页,则显示所有页数,如果大于5页,则显示5页。根据当前点击的页数生成
 var maxPage=jQuery("#countPage").text();
 var nowPage=jQuery("#nowPage").text();
 var index=parseInt(nowPage);//当前页
 var title=jQuery("#title").text();
 var pageCount =parseInt(maxPage) ;//模拟后台总页数
 //生成分页按钮
 if(pageCount>5){
 page_icon(1,5,0);
 pageGroup(index,pageCount);
 }else{
 //alert("66");
 page_icon(1,pageCount,0);
 pageGroup(index,pageCount);
 }

 //点击分页按钮触发
 $("#pageGro li").live("click",function(){
 if(pageCount > 5){
 var pageNum = parseInt($(this).html());//获取当前页数
 window.location.href = "/article/search/"+title+"/"+pageNum;
 pageGroup(pageNum,pageCount);
 }else{
 var indexpage=jQuery(this).text();
 window.location.href = "/article/search/"+title+"/"+indexpage;
 $(this).addClass("on");
 $(this).siblings("li").removeClass("on");
 }
 });

 //点击上一页触发
 $("#pageGro .pageUp").click(function(){
 if(pageCount > 5){
 if(index>1){
 window.location.href = "/article/search/"+title+"/"+(index-1);
 }
 }else{
 if(index > 1){
 window.location.href = "/article/search/"+title+"/"+(index-1);
 $("#pageGro li").removeClass("on");//清除所有选中
 }
 }
 });

 //点击下一页触发
 $("#pageGro .pageDown").click(function(){
 if(pageCount > 5){
 if(nowPage<pageCount){
 window.location.href = "/article/search/"+title+"/"+(index+1);
 }
 }else{
 if(index< pageCount){
 window.location.href = "/article/search/"+title+"/"+(index+1);
 $("#pageGro li").removeClass("on");//清除所有选中
 }
 }
 });
});

//点击跳转页面
function pageGroup(pageNum,pageCount){
 if(pageCount>5){
 switch(pageNum){
 case 1:
 page_icon(1,5,0);
 break;
 case 2:
 page_icon(1,5,1);
 break;
 case pageCount-1:
 page_icon(pageCount-4,pageCount,3);
 break;
 case pageCount:
 page_icon(pageCount-4,pageCount,4);
 break;
 default:
 page_icon(pageNum-2,pageNum+2,2);
 break;
 }
 }
 if(pageCount<5){
 switch(pageNum){
 case 1:
 page_icon(1,pageCount,0);
 break;
 case 2:
 page_icon(1,pageCount,1);
 break;
 case pageCount-1:
 page_icon(1,pageCount,2);
 break;
 case pageCount:
 page_icon(1,pageCount,3);
 break;
 }
 }
 if(pageCount==5){
 switch(pageNum){
 case 1:
 page_icon(1,pageCount,0);
 break;
 case 2:
 page_icon(1,pageCount,1);
 break;
 case pageCount-1:
 page_icon(1,pageCount,3);
 break;
 case pageCount:
 page_icon(1,pageCount,4);
 break;
 default:
 page_icon(1,pageNum+2,2);
 break;
 }
 }
}

//根据当前选中页生成页面点击按钮
function page_icon(page,count,eq){
 var ul_html = "";
 for(var i=page; i<=count; i++){
 ul_html += "<li>"+i+"</li>";
 }
 $("#pageGro ul").html(ul_html);
 $("#pageGro ul li").eq(eq).addClass("on");
}

//上一页
function pageUp(pageNum,pageCount){
 switch(pageNum){
 case 1:
 break;
 case 2:
 page_icon(1,5,0);
 break;
 case pageCount-1:
 page_icon(pageCount-4,pageCount,2);
 break;
 case pageCount:
 page_icon(pageCount-4,pageCount,3);
 break;
 default:
 page_icon(pageNum-2,pageNum+2,1);
 break;
 }
}

//下一页
function pageDown(pageNum,pageCount){
 switch(pageNum){
 case 1:
 page_icon(1,5,1);
 break;
 case 2:
 page_icon(1,5,2);
 break;
 case pageCount-1:
 page_icon(pageCount-4,pageCount,4);
 break;
 case pageCount:
 break;
 default:
 page_icon(pageNum-2,pageNum+2,3);
 break;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
Angular2库初探
Mar 01 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
laypage+SpringMVC实现后端分页
Jul 27 #Javascript
laypage.js分页插件使用方法详解
Jul 27 #Javascript
layui2.0使用table+laypage实现真分页
Jul 27 #Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 #Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 #Javascript
基于ssm框架实现layui分页效果
Jul 27 #Javascript
layUI实现前端分页和后端分页
Jul 27 #Javascript
You might like
PHP里的中文变量说明
2011/07/23 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
js操作checkbox遇到的问题解决
2013/06/29 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Python 探针的实现原理
2016/04/23 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python sys.argv[]用法实例详解
2018/05/25 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
Ruby如何定义一个类
2012/10/08 面试题
教师党员一句话承诺
2014/03/28 职场文书
三潭印月的导游词
2015/02/12 职场文书
高考1977观后感
2015/06/04 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Oracle使用别名的好处
2022/04/19 Oracle