jquery 简易分页

来源：互联网发布：mysql 5.0 32位下载编辑：程序博客网时间：2024/06/06 03:22

实现效果

这里写图片描述

需要引入的文件

<link rel="stylesheet" type="text/css" href="page.css"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="page.js"></script>

index.html

<ul class="page" maxshowpageitem="5" pagelistcount="5"  id="page"></ul><script type="text/javascript">    function myFn(curPage){        // 控制台打印当前页码        console.log(curPage);    }    $("#page").initPage(80,1,myFn);</script>

page.css

.page{    list-style: none;}.page>li{    float: left;    padding: 5px 10px;    cursor: pointer;}.page .pageItem{    border: solid thin #DDDDDD;    margin: 5px;}.page .pageItemActive{    border: solid thin #dbdbdb;    margin: 5px;    background-color: #dbdbdb;    color:white;}.page .pageItem:hover{    border: solid thin #dbdbdb;    background-color: #dbdbdb;    color:white;}.page .pageItemDisable{    border: solid thin #DDDDDD;    margin: 5px;    background-color: #DDDDDD;}

page.js

$.fn.extend({    "initPage":function(listCount,currentPage,fun){        var maxshowpageitem = $(this).attr("maxshowpageitem");        if(maxshowpageitem!=null&&maxshowpageitem>0&&maxshowpageitem!=""){            page.maxshowpageitem = maxshowpageitem;        }        var pagelistcount = $(this).attr("pagelistcount");        if(pagelistcount!=null&&pagelistcount>0&&pagelistcount!=""){            page.pagelistcount = pagelistcount;        }        var pageId = $(this).attr("id");        page.pageId=pageId;        if(listCount<0){            listCount = 0;        }        if(currentPage<=0){            currentPage=1;        }        page.setPageListCount(listCount,currentPage,fun);    }});var  page = {    "pageId":"",    "maxshowpageitem":5,//最多显示的页码个数    "pagelistcount":10,//每一页显示的内容条数    /**     * 初始化分页界面     * @param listCount 列表总量     */    "initWithUl":function(listCount,currentPage){        var pageCount = 1;        if(listCount>=0){            var pageCount = listCount%page.pagelistcount>0?parseInt(listCount/page.pagelistcount)+1:parseInt(listCount/page.pagelistcount);        }        var appendStr = page.getPageListModel(pageCount,currentPage);        $("#"+page.pageId).html(appendStr);    },    /**     * 设置列表总量和当前页码     * @param listCount 列表总量     * @param currentPage 当前页码     */    "setPageListCount":function(listCount,currentPage,fun){        listCount = parseInt(listCount);        currentPage = parseInt(currentPage);        page.initWithUl(listCount,currentPage);        page.initPageEvent(listCount,fun);        fun(currentPage);    },    "initPageEvent":function(listCount,fun){        $("#"+page.pageId +">li[class='pageItem']").on("click",function(){            page.setPageListCount(listCount,$(this).attr("page-data"),fun);        });    },    "getPageListModel":function(pageCount,currentPage){        var prePage = currentPage-1;        var nextPage = currentPage+1;        var prePageClass ="pageItem";        var nextPageClass = "pageItem";        if(prePage<=0){            prePageClass="pageItemDisable";        }        if(nextPage>pageCount){            nextPageClass="pageItemDisable";        }        var appendStr ="";        appendStr+="<li class='"+prePageClass+"' page-data='1' page-rel='firstpage'>首页</li>";        appendStr+="<li class='"+prePageClass+"' page-data='"+prePage+"' page-rel='prepage'>&lt;上一页</li>";        var miniPageNumber = 1;        if(currentPage-parseInt(page.maxshowpageitem/2)>0&&currentPage+parseInt(page.maxshowpageitem/2)<=pageCount){            miniPageNumber = currentPage-parseInt(page.maxshowpageitem/2);        }else if(currentPage-parseInt(page.maxshowpageitem/2)>0&&currentPage+parseInt(page.maxshowpageitem/2)>pageCount){            miniPageNumber = pageCount-page.maxshowpageitem+1;            if(miniPageNumber<=0){                miniPageNumber=1;            }        }        var showPageNum = parseInt(page.maxshowpageitem);        if(pageCount<showPageNum){            showPageNum = pageCount        }        for(var i=0;i<showPageNum;i++){            var pageNumber = miniPageNumber++;            var itemPageClass = "pageItem";            if(pageNumber==currentPage){                itemPageClass = "pageItemActive";            }            appendStr+="<li class='"+itemPageClass+"' page-data='"+pageNumber+"' page-rel='itempage'>"+pageNumber+"</li>";        }        appendStr+="<li class='"+nextPageClass+"' page-data='"+nextPage+"' page-rel='nextpage'>下一页&gt;</li>";        appendStr+="<li class='"+nextPageClass+"' page-data='"+pageCount+"' page-rel='lastpage'>尾页</li>";       return appendStr;    }}

0 0