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 相关文章推荐
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
jquery仿微信聊天界面
May 06 jQuery
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
vue实现中部导航栏布局功能
Jul 30 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
PHP访问Google Search API的方法
2015/03/05 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
深入浅析php json 格式控制
2015/12/24 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
python爬虫---requests库的用法详解
2020/09/28 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
上课迟到检讨书300字
2014/10/15 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
vue+echarts实现多条折线图
2022/03/21 Vue.js