JavaScript自定义分页样式

下面是关于“JavaScript自定义分页样式”的完整攻略：

分页样式选取

在实现自定义分页样式之前，首先需要确定自己想实现什么样的分页样式。一般来说，分页样式可分为两种，一种是原生样式，即浏览器默认的纯文字链接分页样式；另一种则是自定义分页样式，样式多样，可以把分页效果变得更加美观，可以选择自己喜欢的样式，而且自定义分页样式除了可以实现更好的用户体验外，同时也可以根据自己网站的需求进行改造。这里建议在寻找分页样式的时候，尽量选择现成的样式，不要自己设计。

分页插件选择

前端界比较流行的分页插件很多，例如 laypage、pagination.js、Jquery.pagina等，这些插件均可根据自己的需求进行定制开发，或者根据自己的需求选择封装好的插件。

这里我们以 pagination.js 分页插件为例子，来说明JavaScript自定义分页样式的具体实现过程。

使用pagination.js实现JavaScript分页

第一步：引入相关文件

在使用 pagination.js 前，我们需要引入 pagination.js 文件，并且引入样式文件和相关的jQuery库。

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引入pagination.js样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/paginationjs/2.1.5/pagination.css" />

<!-- 引入pagination.js插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/paginationjs/2.1.5/pagination.js"></script>

第二步：HTML结构

分页的HTML结构一般比较简单，包含一个分页容器和一个存放分页数据的容器即可。

<!-- 分页容器 -->
<div id="pagination"></div>

<!-- 分页数据容器 -->
<div class="content"></div>

第三步：JS调用插件

通过JS调用 pagination.js 插件，在这里我们可以设置分页效果的样式，例如文字样式、pagination.js 样式等等，并且可以设置其他的参数。

// 分页效果的样式
var options = {
    currentPage: 1,         // 当前页
    totalPages: 10,         // 总页数
    size: "normal",
    alignment: "center",
    onPageClick: function (pageNumber, event) { // 单击页码的回调函数
        $(".content").html("当前页是：" + pageNumber); // 更新数据
    },
    pageUrl: function (type, page, current) { // 自定义url
        return "#page="+page;
    }
}

// 分页初始化
$("#pagination").pagination(options);

第四步：自定义样式

通过更改 pagination.js 样式文件可以更改分页效果的样式，例如增加边框、修改字体等等。

下面是一个自定义的分页样式示例：

/* 自定义分页样式 */
.paginationjs {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 4px;
}

/* 分页按钮的样式 */
.paginationjs-pages li {
    display: inline-block;
    margin-right: 5px;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
}

/* 高亮选中的页面按钮样式 */
.paginationjs-pages li.active {
    background-color: #4CAF50;
    color: white;
}

/* 下一页按钮样式 */
.paginationjs-next, .paginationjs-prev{
    display:inline-block;
    border:1px solid #ddd;
    padding:5px;
    border-radius:4px;
    cursor:pointer;
    margin-right:5px;
}

/* 禁用下一页、上一页按钮的样式 */
.paginationjs-prev.disabled,.paginationjs-next.disabled{
    color: #ccc;
    cursor: not-allowed;
}

总结

以上就是使用 pagination.js 实现 JavaScript 分页所需的全部步骤，通过这个过程，我们可以发现实现自定义分页样式并不难，只需要引入分页插件、调用插件并自定义分页样式即可。之后我们可以根据自己的需求来设计更加合适的分页效果，提升用户体验。