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 相关文章推荐
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
浅谈Python NLP入门教程
2017/12/25 Python
用python实现对比两张图片的不同
2018/02/05 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python实现井字棋小游戏
2020/03/04 Python
python 实现汉诺塔游戏
2020/11/28 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
股份转让协议书
2014/04/12 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
贷款承诺书
2015/01/20 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书