2021-07-10 原生js实现分页效果

实现

思路

代码

html

<div id="pageBox"></div>

css

a {margin: 5px;}

js

window.onload = function() {
    page({
        id: 'pageBox',
        nowPage: 5,
        allPage: 10,
        callBack: function(now, all) {}
    });
};

function page(opt) {
    if (!opt.id) return false;
    var obj = document.getElementById(opt.id);
    var nowPage = opt.nowPage || 1;
    var allPage = opt.allPage || 5;
    var callBack = opt.callBack || function() {};
    if (nowPage >= 4 && allPage >= 6) {
        var aObj = document.createElement('a');
        aObj.href = '#1';
        aObj.innerHTML = '首页';
        obj.appendChild(aObj);
    }
    if (nowPage >= 2) {
        var aObj = document.createElement('a');
        aObj.href = '#' + (nowPage - 1);
        aObj.innerHTML = '上一页';
        obj.appendChild(aObj);
    }
    if (allPage <= 5) {
        for (var i = 1; i <= allPage; i++) {
            var aObj = document.createElement('a');
            aObj.href = '#' + i;
            if (nowPage == i) aObj.innerHTML = i;
            else aObj.innerHTML = '[' + i + ']';
            obj.appendChild(aObj);
        }
    } else {
        for (var i = 1; i <= 5; i++) {
            var aObj = document.createElement('a');
            if (nowPage == 1 || nowPage == 2) {
                aObj.href = '#' + i;
                if (nowPage == i) aObj.innerHTML = i;
                else aObj.innerHTML = '[' + i + ']';
            } else if ((allPage - nowPage) == 0 || (allPage - nowPage) == 1) {
                aObj.href = '#' + (allPage - 5 + i);
                if ((allPage - nowPage) == 0 && i == 5) aObj.innerHTML = (allPage - 5 + i);
                else if ((allPage - nowPage) == 1 && i == 4) aObj.innerHTML = (allPage - 5 + i);
                else aObj.innerHTML = '[' + (allPage - 5 + i) + ']';
            } else {
                aObj.href = '#' + (nowPage - 3 + i);
                if (i == 3) aObj.innerHTML = (nowPage - 3 + i);
                else aObj.innerHTML = '[' + (nowPage - 3 + i) + ']';
            }
            obj.appendChild(aObj);
        }
    }
    if ((allPage - nowPage) >= 1) {
        var aObj = document.createElement('a');
        aObj.href = '#' + (nowPage + 1);
        aObj.innerHTML = '下一页';
        obj.appendChild(aObj);
    }
    if ((allPage - nowPage) >= 3 && allPage >= 6) {
        var aObj = document.createElement('a');
        aObj.href = '#' + allPage;
        aObj.innerHTML = '尾页';
        obj.appendChild(aObj);
    }
    callBack(nowPage, allPage);
    var aObjAll = document.querySelectorAll('a');
    for (var i = 0; i < aObjAll.length; i++) {
        aObjAll[i].onclick = function() {
            var nowPage = parseInt(this.getAttribute('href').substring(1));
            obj.innerHTML = '';
            page({
                id: opt.id,
                nowPage: nowPage,
                allPage: allPage,
                callBack: callBack
            });
            return false;
        };
    }
}

效果