博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用pageGroup.js实现分页功能
阅读量:4582 次
发布时间:2019-06-09

本文共 5113 字,大约阅读时间需要 17 分钟。

1.html页面中

引入

 

 

{
{
if maxPage>0}}//总页数
上一页
下一页
{
{/if}}
//总页数
//当前页
//标题

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
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 += "
  • "+i+"
  • "; } $("#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; }}

     

    转载于:https://www.cnblogs.com/yingzi1028/p/5089521.html

    你可能感兴趣的文章
    Servlet中Cookie的用法
    查看>>
    开源,选择Google Code还是Sourceforge
    查看>>
    传感器之超声波测距HC-SR04
    查看>>
    浅谈Java中的hashCode方法
    查看>>
    自己编写类似于枚举的类型(多例模式)
    查看>>
    Asp: Server.mapPath() 注意事项
    查看>>
    关于减少BUG的思考
    查看>>
    Response.AddHeader("Content-Disposition", "attachment; filename=" + file.Name) 中文显示乱码
    查看>>
    第二章随笔
    查看>>
    string.Format出现异常"输入的字符串格式有误"的解决方法
    查看>>
    SSL 1010——方格取数
    查看>>
    关于同余与模运算的总结
    查看>>
    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
    查看>>
    【转载】法线贴图Nomal mapping 原理
    查看>>
    prado 初步分析
    查看>>
    php 做守护进程1
    查看>>
    简单员工管理实例
    查看>>
    textwrap 模块
    查看>>
    SAP 到出XLS
    查看>>
    HSV
    查看>>