分享一个自己动手写的jQuery分页插件

下面是分享一个自己动手写的jQuery分页插件的完整攻略，包含以下几个部分：

1. 编写HTML结构
2. 编写CSS样式
3. 编写jQuery分页插件代码

接下来，我们将逐一进行详细讲解。

1. 编写HTML结构

我们的分页插件基于HTML和jQuery，因此需要先编写HTML结构。我们可以在页面中定义一个div容器，用于显示分页列表，如下所示：

<div class="pagination"></div>

这是我们的分页插件的容器，我们可以通过jQuery插件在其中渲染分页列表。

2. 编写CSS样式

为了美化分页列表样式，我们需要编写CSS样式。在这里只给出简单的样式示例，大家可以根据自己的需求进行修改。

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.pagination a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    margin-right: 5px;
    border-radius: 5px;
}
.pagination a.active,
.pagination a:hover {
    background: #ccc;
    color: #fff;
}

3. 编写jQuery分页插件代码

在这里我们将使用比较流行的jQuery库来编写我们的分页插件。我们将编写一个名为pagination的方法，这个方法将接收数据总量和当前页码，然后为分页列表中的每个页码生成一个对应的a标签。

jQuery.fn.pagination = function(total, current) {
    // 限制最大显示页数为10
    var maxShow = 10;
    // 计算总页数
    var totalPage = Math.ceil(total / maxShow);

    // 创建分页列表
    var pagination = '<a href="javascript:;" class="prev"><</a>';
    for (var i = 1; i <= totalPage; i++) {
        if (i == current) {
            pagination += '<a href="javascript:;" class="active">' + i + '</a>';
        } else {
            pagination += '<a href="javascript:;">' + i + '</a>';
        }
    }
    pagination += '<a href="javascript:;" class="next">></a>';

    // 渲染分页列表
    this.html(pagination);

    // 绑定事件
    var a = this.find('a');
    a.filter(':not(.prev,.next)').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    });
    a.filter('.prev').click(function() {
        var current = parseInt(a.filter('.active').text());
        current = current > 1 ? current - 1 : 1;
        $(a[current]).addClass('active').siblings().removeClass('active');
    });
    a.filter('.next').click(function() {
        var current = parseInt(a.filter('.active').text());
        current = current < totalPage ? current + 1 : totalPage;
        $(a[current]).addClass('active').siblings().removeClass('active');
    });
};

完成后，我们只需要调用这个方法，传入数据总量和当前页码即可生成分页列表。示例如下：

$('.pagination').pagination(100, 1);

这将生成一个数据总量为100，当前页码为1的分页列表。

示例演示

下面是两个示例演示分页插件的使用：

$('.pagination').pagination(60, 1);

$('.pagination').pagination(60, 5);

以上就是本人分享一个自己动手写的jQuery分页插件的完整攻略，希望对大家有所帮助。