JavaScript0830-分页

最新推荐文章于 2024-07-21 10:17:51 发布

goto_w

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量159

点赞数

分类专栏： js基础语法文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_52696618/article/details/126633623

版权

js基础语法专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .body {
            width: 700px;
            margin: 0 auto;
            line-height: 24px;
        }

        .paginate {
            width: 700px;
            display: flex;
            justify-content: center;
            height: 38px;
            line-height: 38px;
        }

        .paginate div {
            height: 18px;
            line-height: 18px;
            padding: 10px;
            margin: 0 10px;
            border: 1px solid #eee;
        }

        .paginate .list {
            height: 38px;
            line-height: 38px;
            border: none;
            padding: 0;
            display: flex;
        }

        .list p {
            height: 18px;
            line-height: 18px;
            padding: 10px;
            margin: 0 10px;
            border: 1px solid #eee;
        }

        .active {
            background-color: red;
        }

        .paginate .number {
            width: 40px;
            margin-right: 10px;
        }

        .paginate button {
            width: 50px;
        }
    </style>
</head>

<body>
    <div class="body">

    </div>
    <!-- 分页的容器 -->
    <div class="paginate"></div>
    <script src="page.js"></script>
    <script>
        let options = {
            data: {
                total: 105,//表示数据的总条数
                pageSize: 10//表示每页显示的数据条数
            },
            language: {
                first: '<<',
                prev: '<',
                next: '>',
                last: '>>'
            },
        };
        //生成100条数据
        let data = [];
        for(let i = 0;i<105;i++){
            data.push('这个是第'+(i+1)+'条数据');
        }
        new Page('.paginate', options, currentPage => {
            let html = '';
            let start = (currentPage - 1) * options.data.pageSize;
            let end = currentPage * options.data.pageSize > options.data.total ? options.data.total : currentPage * options.data.pageSize;

            for (let i = start; i < end; i++) {
                html += `<div class="content">${data[i]}</div>`;
            }
            document.querySelector('.body').innerHTML = html;
        });
    </script>
</body>

</html>

/**
 * 分页工具
 * @param {String} elem 存储分页导航的容器 选择器
 * @param {Object} options 分页的配置信息
 */
function Page(elem, options, callback) {
    this.callback = callback;
    //使用属性保存容器的dom对象
    this.container = document.querySelector(elem);
    //保存数字标签的容器dom对象
    this.listDom = null;
    //存储input输入框的dom对象
    this.inputDom = null;
    //默认配置
    this.config = {
        data: {
            total: 300,//表示数据的总条数
            pageSize: 20//表示每页显示的数据条数
        },
        language: {
            first: '首页',
            prev: '上一页',
            list: '',//只是起到占位作用
            next: '下一页',
            last: '尾页'
        }
    }
    //参数合并 根据默认配置与用户传递的进行合并
    this.mergeConfig(options);
    //记录总页数
    this.totalPage = Math.ceil(this.config.data.total / this.config.data.pageSize);
    //使用属性记录现在的页码
    this.currentPage = 1;
    //调用显示分页导航
    this.init();
    //处理点击事件
    this.executeEvent();
}

//原型上添加控制导航的显示开关
Page.prototype.init = function () {
    //每次执行显示前将已有的内容清除
    this.container.innerHTML = '';
    this.createOutsideTag();
    this.createNumberTag();
    this.creatJumpTag();
    this.callback(this.currentPage);
}

Page.prototype.creatJumpTag = function () {
    //创建输入框
    this.inputDom = document.createElement('input');
    this.inputDom.style.width = '50px';
    this.container.appendChild(this.inputDom);
    //创建按钮
    let buttonDom = document.createElement('button');
    buttonDom.innerHTML = 'Jump';
    this.container.appendChild(buttonDom);
}

//处理点击事件
Page.prototype.executeEvent = function () {
    //为容器绑定点击事件
    //特别注意在事件中 this表示的是dom对象 如果需要使用到当前pageduix 可以使用箭头函数或者先保存一份后期使用
    this.container.addEventListener('click', event => {
        switch (event.target.className) {
            case 'first':
                this.currentPage = 1;
                this.init();
                break;
            case 'prev':
                if (this.currentPage != 1) {
                    this.currentPage--;
                    this.init();
                }
                break;
            case 'next':
                if (this.currentPage < this.totalPage) {
                    this.currentPage++;
                    this.init();
                }
                break;
            case 'last':
                this.currentPage = this.totalPage;
                this.init();
                break;
            default:
                if (event.target.nodeName == 'P') {
                    //点击的是数字
                    this.currentPage = event.target.innerHTML - 0;
                    this.init();
                } else if (event.target.nodeName.toLowerCase() == 'button') {
                    //说明目前点击的是跳转按钮
                    let value = Number(this.inputDom.value);
                    if (!isNaN(value) && value > 0 && value <= this.totalPage) {
                        this.currentPage = value;
                        this.init();
                    }
                }
                break;
        }
    })
}

Page.prototype.createNumberTag = function () {
    if (this.totalPage <= 5) {
        //总页数小于等于5 显示固定1-5直接的数字
        this.createNumber(1, 5);
        return;
    }
    //代码执行到这一行绝对证明总页数是>5 再以当前页进行判断
    if (this.currentPage <= 3) {
        this.createNumber(1, 5);
    } else if (this.currentPage >= this.totalPage - 2) {
        this.createNumber(this.totalPage - 4, this.totalPage);
    } else {
        this.createNumber(this.currentPage - 2, this.currentPage + 2);
    }
}

//原型上添加生成指定区间数字的方法
Page.prototype.createNumber = function (start, end) {
    for (let i = start; i <= end; i++) {
        let pDom = document.createElement('p');
        //默认当前所在的页显示特殊颜色
        i == this.currentPage && pDom.setAttribute('class', 'active');
        //设置标签内容innerText与innerHTML类似
        pDom.innerText = i;
        this.listDom.appendChild(pDom);
    }
}

//在原型上添加生成外层标签的方法
Page.prototype.createOutsideTag = function () {
    for (let key in this.config.language) {
        let divDom = document.createElement('div');
        //设置样式名称 样式名称是暴露给用户进行外观设置
        divDom.className = key;
        divDom.innerHTML = this.config.language[key];
        //将存放数字导航的容器的dom对象使用对象属性保存
        key == 'list' && (this.listDom = divDom);
        //加入到页面
        this.container.appendChild(divDom);
    }
}

//原型上添加参数合并方法
Page.prototype.mergeConfig = function (options) {
    for (let attr in this.config) {
        for (let key in this.config[attr]) {
            options[attr] && options[attr][key] && (this.config[attr][key] = options[attr][key])
        }
    }
}