简单的js分页

Html

Css


    sjfejkgnvkn
    0222222
    块
    了
    是
    0666666
    0777777
    0888888
    我
    10101010
    11111111
    12121212
    13131313
    14141414
    15151515
    16161616
    17171717
    18181818
    19191919
    20202020
    01111111
    0222222
    0333333
    0444444
    0555555

 .j-curr {
	color:red;
	border:1px solid skyblue;
}
#pager {
	width:400px;
	margin:50px auto;
	text-align:center;
	line-height:20px;
}
#pager li {
	display:inline-block;
	padding:0 5px;
	cursor:pointer;
}

var pager = function() {
    //公共函数
    function T$(id) {
        return document.getElementById(id);
    }

function T$$(root, tag) {
        return (root || document).getElementsByTagName(tag);
    }

function $extend(object1, object2) {
        for (var p in object2) {
            object1[p] = object2[p];
        }
        return object1;
    }

//默认参数配置
    var defaultOptions = {
        elemShowCount: 4, //每页显示条数，默认为5条
        pageShowCount: 5, //显示的页码数目，默认显示4个页码
        showFirstPageBtnAndLastPageBtn: true, //是否显示首页，尾页，默认显示
        showPrevBtnAndNextBtn: true, //是否显示上一页，下一页，默认显示
        showPageNumTips: true, //是否显示【1/7页】页面提示，默认显示
        showPageNum: true //是否显示分页的数字，默认显示
    };

//主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数
    var showPage = function(bid, pid, options) {
        var self = this;
        if (!(self instanceof showPage)) {
            return new showPage(bid, pid, options);
        }
        self.container = T$(bid); //元素容器div
        self.pagerBox = T$(pid); //翻页容器div
        if (!self.container) {
            return;
        }
        self.options = $extend(defaultOptions, options || {});
        self.elem = T$$(self.container, 'figure'); //需要分页的元素
        self.elemTotalCount = self.elem.length || 0; //分页元素的总个数
        self.pageTotalCount = Math.ceil(self.elemTotalCount / self.options.elemShowCount) || 0; //总页数
    };

showPage.prototype = {
        constructor: showPage,
        //显示当页的元素内容，参数currPageNum为当前页码，从0开始
        showChangeElemCont: function(currPageNum) {
            var self = this; //this为showPage对象
            var nextPageCount = (currPageNum + 1) * self.options.elemShowCount < self.elemTotalCount ? (currPageNum + 1) * self.options.elemShowCount : self.elemTotalCount; //判断为最后一页时，最后一页应该显示的数据条数
            for (var i = 0; i < self.elemTotalCount; i++) {
                self.elem[i].style.display = 'none';
            }
            for (var i = currPageNum * self.options.elemShowCount, l = nextPageCount; i < l; i++) {
                self.elem[i].style.display = 'block';
            }
        },
        //显示当页的页码内容，参数currPageNum为当前页码，从0开始
        showChangePageCont: function(currPageNum) {
            var self = this; //this为showPage对象
            var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = ''; //firstPageHtml:首页   prevPageHtml:上一页  pageLinkHtml:页码表   nextPageHtml:下一页  lastPageHtml:尾页   pageTips:页码提示
            var startPage, endPage; //startPage:页码列表中的第一页   endPage:页码列表中的最后一页
            var pageShowMidCount = Math.ceil(self.options.pageShowCount / 2); //页码中间值，当超过这个值时，页码列表发生变化
            if (self.pageTotalCount <= self.options.pageShowCount) { //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码
                startPage = 0;
                endPage = self.pageTotalCount - 1;
            } else {
                if (self.options.pageShowCount % 2 == 0) {
                    if ((currPageNum + 1 - pageShowMidCount) <= 0) { //首页
                        startPage = 0;
                        endPage = self.options.pageShowCount - 1;
                    } else if ((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount) { //尾页
                        startPage = self.pageTotalCount - 1 - self.options.pageShowCount + 1;
                        endPage = self.pageTotalCount - 1;
                    } else {
                        startPage = currPageNum - pageShowMidCount + 1;
                        endPage = currPageNum + pageShowMidCount;
                    }
                } else {
                    if ((currPageNum + 1 - pageShowMidCount) <= 0) { //首页
                        startPage = 0;
                        endPage = self.options.pageShowCount - 1;
                    } else if ((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount) { //尾页
                        startPage = self.pageTotalCount - 1 - self.options.pageShowCount + 1;
                        endPage = self.pageTotalCount - 1;
                    } else {
                        startPage = currPageNum - pageShowMidCount + 1;
                        endPage = currPageNum + pageShowMidCount - 1;
                    }
                }
            }

//显示首页尾页
            if (self.options.showFirstPageBtnAndLastPageBtn == true) {
                firstPageHtml = '<li>首页</li>';
                lastPageHtml = '<li>尾页</li>';
            }
            //显示上一页下一页
            //if(self.options.showPrevBtnAndNextBtn == true){
            prevPageHtml = '<li><</li>'; //首页不显示上一页
            nextPageHtml = '<li>>></li>'; //尾页不显示最后一页
            //            }
            //显示页码数字链接
            for (var i = startPage, l = endPage; i <= l; i++) {
                if (currPageNum == i) {
                    pageLinkHtml += '<li class="j-curr">' + (i + 1) + '</li>';
                } else {
                    pageLinkHtml += '<li>' + (i + 1) + '</li>';
                }
            }
            //显示页码提示信息
            if (self.options.showPageNumTips == true) {
                pageTips = '<span>' + (currPageNum + 1) + '/' + self.pageTotalCount + '</span>';
            }
            //拼出页码元素的整体内容
            self.pagerBox.innerHTML = firstPageHtml + pageLinkHtml + prevPageHtml + nextPageHtml + lastPageHtml + pageTips;

return {
        onShowPage: function(bid, pid, options) {
            //调用主类
            var st = new showPage(bid, pid, options);
            st.showChangeElemCont(0);
            st.showChangePageCont(0);
        }
    }
}();

pager.onShowPage('list', 'pager', {
    elemShowCount: 5,
    pageShowCount: 6
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简单的js分页



代码描述：简单的js分页代码,待数据实列

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

出来逛逛

相关代码

简单的js分页

最新