simplePagination.js 使用教程

2024-10-10 13:50:31作者：余洋婵Anita

1. 项目介绍

simplePagination.js 是一个轻量级的 jQuery 分页插件，旨在为网页提供简单易用的分页功能。该插件支持多种分页样式，并且配置灵活，适用于各种需要分页功能的网页应用。

2. 项目快速启动

2.1 安装

首先，你需要在你的项目中引入 jQuery 和 simplePagination.js。你可以通过以下方式引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simplePagination.js 示例</title>
    <link rel="stylesheet" href="path/to/simplePagination.css">
</head>
<body>
    <div id="pagination"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.simplePagination.js"></script>
    <script>
        $(function() {
            $('#pagination').pagination({
                items: 100,
                itemsOnPage: 10,
                cssStyle: 'light-theme'
            });
        });
    </script>
</body>
</html>

2.2 配置选项

simplePagination.js 提供了多种配置选项，以下是一些常用的配置：

items: 总项目数。
itemsOnPage: 每页显示的项目数。
cssStyle: 分页样式，支持 light-theme、dark-theme 等。

2.3 示例代码

以下是一个简单的示例代码，展示了如何使用 simplePagination.js 进行分页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simplePagination.js 示例</title>
    <link rel="stylesheet" href="path/to/simplePagination.css">
</head>
<body>
    <div id="pagination"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.simplePagination.js"></script>
    <script>
        $(function() {
            $('#pagination').pagination({
                items: 100,
                itemsOnPage: 10,
                cssStyle: 'light-theme'
            });
        });
    </script>
</body>
</html>