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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
JS求平均值的小例子
Nov 29 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
JS window对象简单操作完整示例
Jan 14 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
什么是GWT的Module
2013/01/20 面试题
多媒体专业自我鉴定
2014/02/28 职场文书
村干部承诺书
2014/03/28 职场文书
生日寄语大全
2014/04/08 职场文书
企业负责人任命书
2014/06/05 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
婚礼父母致辞
2015/07/28 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
导游词之西安骊山
2019/12/20 职场文书