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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
使用angular写一个hello world
Jan 23 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
javascript的BOM
May 03 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
vue-router 中 meta的用法详解
Nov 01 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 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+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
js倒计时小程序
2013/11/05 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
python实现将内容分行输出
2015/11/05 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
django-初始配置(纯手写)详解
2019/07/30 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
酒店节能减排方案
2014/05/26 职场文书
责任书格式范文
2014/07/28 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
音乐之声观后感
2015/06/04 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js