jquery 简易分页

傷城~ 2022-06-17 07:28 227阅读 0赞

### 实现效果 ###

![这里写图片描述][SouthEast]

### 需要引入的文件 ###

--------------------

> 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'><上一页</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'>下一页></li>";
            appendStr+="<li class='"+nextPageClass+"' page-data='"+pageCount+"' page-rel='lastpage'>尾页</li>";
           return appendStr;
    
        }
    }

[SouthEast]: /images/20220617/efea29fbcb2342229cba5f03e331e541.png