JavaScript小案例------js实现分页插件效果篇

前端志茗

已于 2022-04-05 21:45:50 修改

阅读量3.6k

点赞数 8

文章标签： javascript

于 2022-04-04 22:16:02 首次发布

本文链接：https://blog.csdn.net/qq_56745273/article/details/123960596

版权

原生js实现分页插件效果

原生js实现分页插件效果

原生js实现分页插件效果

分页插件效果

分页插件效果需求：

网站千千万，分页插件几乎全都有，大部分都有这个功能。所以我讲解一下用原生js来写分页插件效果。
分页插件主要就是显示当前页面，和首页，尾页，上一页，下一页等功能的实现。当然具体的功能下面来说。话不多说，开干！

效果图：

当然是先上效果图啦，当然代码的实现运行效果上面就有。
在这里插入图片描述

HTML&CSS代码:

<!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>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="pagercontainer"></div>

    <script src="./idnex.js"></script>
    <script>
        var pagercontainer = document.getElementById('pagercontainer');
        // 1. 当前页码  2. 总页码数 3. 中间的分页项目的个数 4. 放入哪个容器
        createPager(25, 50, 5, pagercontainer);
    </script>
</body>

</html>

HTML中含有js代码，我会再js中给出解释，这里不做解释

#pagercontainer {
    margin-top: 100px;
    text-align: center;
}

a {
    font-size: 25px;
    border: 1px solid #e1e2e3;
    color: #001ac4;
    user-select: none;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
    margin: 8px;
    cursor: pointer;
    user-select: none;
}

a.active {
    border: none;
    color: #f40;
    cursor: auto;
}

a.disabled {
    color: #999;
    cursor: not-allowed;
}

js

首先是分析一下分页插件都是什么功能，各个功能又要怎么去完成，最后如何用代码写出来。

首先页面上要有当前页码，总页数，分页创建好后放在哪一个容器里面，分页插件的中间显示几个数字，所以要有这四个变量，所以我先创建一个函数createPager用来传入这四个参数，用来执行相关操作。所以我会在html中写入那两行js代码，那两行代码在js文件中写入都是一样，写在html纯属是因为老师教我这样写的，这样写比较好判断，嘿嘿。
写好函数后，开始写代码，动手写核心代码时，要思考一下从哪里开始写，怎么写。我是从创建容器开始，这个容器里面是页面上显示的html，所以我是开始完成这个需求：
1). 首先是创建这个容器元素，然后加上class类。然后写一个函数，有三个参数，分别是样式类，中间的文本，点击后跳转到哪一页这三个参数，所以在之前创建的createPager函数里面在写一个createAnchor函数。
2). 然后再这个createAnchor函数里面创建a元素，给a元素挂上对应的样式类，再设置中间的文本，然后把a元素添加进创建的容器里面。然后给a元素注册一个鼠标点击事件，在事件里面分析一下，跳转就是重新调用一个第一次写的createPager函数，但是有几种情况是不能跳转的：（1）跳转的页数小于1和跳转的页数大于总页数和跳转的页数等于当前的页码，这三种情况不能跳转，所以做判断，直接返回，什么也不做。然后其他的情况是可以跳转的，所以执行调用第一次写的createPager函数，传入四个参数。
3). 然后就是开始创建分页了，分析一下，一共有四个部分，分别是首页和上一页、中间显示的数字、下一页和尾页、当前的页码显示这四个部分，然后这个部分分别来写。首先是首页和上一页 ；如果当前是第一页，那么直接调用两次createAnchor函数，第一次传入(’disabled‘,‘首页’，‘1’)，第二次传入(‘disabled’, ‘上一页’, page - 1)，因为是要有首页和上一页，所以调用两次这个函数，传入两次这个函数。然后再else一下，重新调用一下这个函数两次，只不过传入的参数disabled去掉，因为可以点击，所以去掉，等于1时不可以点击，所以要传入这个样式。然后是中间显示的数字；因为数据多，所以我用循坏来生成，但是要计算最大值和最小值，所以我们要找到最小值和最大值，拿当前的页码减去中间显示的数字/2取整就是最小值，然后最小值要是小于1，就等于1，最大值就是最小值加上中间的数字减去1，如果最大值大于总页码，那么最大值就是总页码值。然后回到刚才的循环中，i初始值是最小值，最大值是最大值。如果i等于了当前页码，那么直接调用一下createAnchor函数，传入(“active”, i, i);，ekse中去掉active样式。然后再开始写下一页和尾页；下一页和尾页于首页和上一页写法一样，只是判断的条件变为当前页码等于总页码，然后做相应的操作。最后当前页码的显示；只需要创建一个span元素，给span元素加入相应的内容或者样式，最后添加进容器中即可，然后最后将生成好的分页全部添加进容器里面即可。还有一个最重要的步骤，那就是清空，再做后续的生成容器之前，我们要将上一次的内容先清空。

js代码：

function createPager(pager, pagerNumber, middlePager, container) {
    // 清空
    container.innerText = '';
    var divpager = document.createElement('div');
    pager.className = 'pager';
    /*
     * className:样式类
     * text:中间的显示文本
     * newPager: 点击后跳转到哪一页
     */
    function createAnchor(className, text, newPager) {
        var a = document.createElement('a');
        a.className = className;
        a.innerText = text;
        divpager.appendChild(a);
        a.onclick = function() {
            // 做相应的三种情况的判断
            if (newPager < 1 || newPager > pagerNumber || newPager === pager) {
                return;
            }
            createPager(newPager, pagerNumber, middlePager, container);
        }
    }
    // 首页和上一页
    if (pager === 1) {
        createAnchor('disabled', '首页', 1)
        createAnchor('disabled', '上一页', pager - 1)
    } else {
        createAnchor('', '首页', 1)
        createAnchor('', '上一页', pager - 1)
    }
    // 中间的数字
    var min = Math.floor(pager - middlePager / 2);
    if (min < 1) {
        min = 1;
    }
    var max = min + middlePager - 1;
    if (max > pagerNumber) {
        max = pagerNumber;
    }
    for (var i = min; i <= max; i++) {
        if (i === pager) {
            createAnchor('active', i, i);
        } else {
            createAnchor('', i, i);
        }
    }
    // 下一页和尾页
    if (pager === pagerNumber) {
        createAnchor('disabled', '下一页', pager + 1)
        createAnchor('disabled', '尾页', pagerNumber);
    } else {
        createAnchor('', '下一页', pager + 1)
        createAnchor('', '尾页', pagerNumber);
    }
    // 当前页
    var span = document.createElement('span');
    span.innerText = pager + "/" + pagerNumber;
    divpager.appendChild(span);
    // 添加进容器中
    container.appendChild(divpager);
}