垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 分页 ​

Foundation 分页组件用于在多页内容之间进行导航。本章将介绍分页的各种用法。

基本分页 ​

使用 .pagination 类创建基本分页：

html
<nav aria-label="分页">
    <ul class="pagination">
        <li class="pagination-previous disabled">上一页</li>
        <li class="current"><span class="show-for-sr">当前页</span>1</li>
        <li><a href="#" aria-label="第2页">2</a></li>
        <li><a href="#" aria-label="第3页">3</a></li>
        <li><a href="#" aria-label="第4页">4</a></li>
        <li class="ellipsis" aria-hidden="true"></li>
        <li><a href="#" aria-label="第12页">12</a></li>
        <li><a href="#" aria-label="第13页">13</a></li>
        <li class="pagination-next"><a href="#" aria-label="下一页">下一页</a></li>
    </ul>
</nav>

居中分页 ​

html
<nav aria-label="分页">
    <ul class="pagination text-center">
        <li class="pagination-previous"><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li class="current">2</li>
        <li><a href="#">3</a></li>
        <li class="pagination-next"><a href="#">下一页</a></li>
    </ul>
</nav>

简单分页 ​

只显示上一页和下一页：

html
<nav aria-label="分页">
    <ul class="pagination">
        <li class="pagination-previous"><a href="#">&laquo; 上一页</a></li>
        <li class="pagination-next"><a href="#">下一页 &raquo;</a></li>
    </ul>
</nav>

禁用状态 ​

html
<ul class="pagination">
    <li class="pagination-previous disabled">上一页</li>
    <li class="current">1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="pagination-next"><a href="#">下一页</a></li>
</ul>

省略号 ​

使用 .ellipsis 表示省略的页码：

html
<ul class="pagination">
    <li class="pagination-previous"><a href="#">上一页</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="ellipsis" aria-hidden="true"></li>
    <li><a href="#">9</a></li>
    <li class="current">10</li>
    <li><a href="#">11</a></li>
    <li class="ellipsis" aria-hidden="true"></li>
    <li><a href="#">19</a></li>
    <li><a href="#">20</a></li>
    <li class="pagination-next"><a href="#">下一页</a></li>
</ul>

自定义样式 ​

圆角分页 ​

html
<style>
    .pagination.rounded li a,
    .pagination.rounded li.current {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        line-height: 40px;
        padding: 0;
        text-align: center;
    }
</style>

<ul class="pagination rounded">
    <li class="pagination-previous"><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="current">2</li>
    <li><a href="#">3</a></li>
    <li class="pagination-next"><a href="#">&raquo;</a></li>
</ul>

按钮式分页 ​

html
<style>
    .pagination.buttons li a {
        background: #f4f4f4;
        border-radius: 4px;
        margin: 0 2px;
    }
    .pagination.buttons li a:hover {
        background: #e0e0e0;
    }
    .pagination.buttons li.current {
        background: #1779ba;
        color: white;
        border-radius: 4px;
        padding: 0.1875rem 0.625rem;
    }
</style>

<ul class="pagination buttons">
    <li class="pagination-previous"><a href="#">上一页</a></li>
    <li><a href="#">1</a></li>
    <li class="current">2</li>
    <li><a href="#">3</a></li>
    <li class="pagination-next"><a href="#">下一页</a></li>
</ul>

彩色分页 ​

html
<style>
    .pagination.primary li.current {
        background: #1779ba;
    }
    .pagination.success li.current {
        background: #3adb76;
    }
    .pagination.warning li.current {
        background: #ffae00;
    }
</style>

分页信息 ​

显示当前页信息：

html
<div class="grid-x align-middle">
    <div class="cell auto">
        <p class="text-muted">显示第 1-10 条，共 100 条记录</p>
    </div>
    <div class="cell shrink">
        <ul class="pagination" style="margin: 0;">
            <li class="pagination-previous disabled">上一页</li>
            <li class="current">1</li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="pagination-next"><a href="#">下一页</a></li>
        </ul>
    </div>
</div>

每页显示数量 ​

结合下拉菜单：

html
<div class="grid-x align-middle">
    <div class="cell shrink">
        <label style="margin-right: 10px;">
            每页显示
            <select style="width: auto; display: inline-block; margin: 0 5px;">
                <option>10</option>
                <option>25</option>
                <option>50</option>
                <option>100</option>
            </select>
            条
        </label>
    </div>
    <div class="cell auto text-right">
        <ul class="pagination" style="margin: 0;">
            <li class="pagination-previous"><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li class="current">2</li>
            <li><a href="#">3</a></li>
            <li class="pagination-next"><a href="#">下一页</a></li>
        </ul>
    </div>
</div>

跳转到指定页 ​

html
<div class="grid-x align-middle">
    <div class="cell auto">
        <ul class="pagination" style="margin: 0;">
            <li class="pagination-previous"><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li class="current">2</li>
            <li><a href="#">3</a></li>
            <li class="ellipsis"></li>
            <li><a href="#">10</a></li>
            <li class="pagination-next"><a href="#">下一页</a></li>
        </ul>
    </div>
    <div class="cell shrink">
        <div class="input-group" style="margin: 0;">
            <span class="input-group-label">跳转到</span>
            <input class="input-group-field" type="number" min="1" max="10" style="width: 60px;">
            <div class="input-group-button">
                <button class="button" type="button">Go</button>
            </div>
        </div>
    </div>
</div>

JavaScript 分页 ​

动态生成分页：

javascript
function createPagination(currentPage, totalPages, container) {
    var html = '<ul class="pagination">';

    // 上一页
    if (currentPage > 1) {
        html += '<li class="pagination-previous"><a href="#" data-page="' + (currentPage - 1) + '">上一页</a></li>';
    } else {
        html += '<li class="pagination-previous disabled">上一页</li>';
    }

    // 页码
    for (var i = 1; i <= totalPages; i++) {
        if (i === currentPage) {
            html += '<li class="current">' + i + '</li>';
        } else if (i === 1 || i === totalPages || Math.abs(i - currentPage) <= 2) {
            html += '<li><a href="#" data-page="' + i + '">' + i + '</a></li>';
        } else if (Math.abs(i - currentPage) === 3) {
            html += '<li class="ellipsis"></li>';
        }
    }

    // 下一页
    if (currentPage < totalPages) {
        html += '<li class="pagination-next"><a href="#" data-page="' + (currentPage + 1) + '">下一页</a></li>';
    } else {
        html += '<li class="pagination-next disabled">下一页</li>';
    }

    html += '</ul>';

    $(container).html(html);

    // 绑定点击事件
    $(container).find('a[data-page]').on('click', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        createPagination(page, totalPages, container);
        // 触发页面加载
        loadPage(page);
    });
}

// 使用
createPagination(1, 10, '#pagination-container');

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 分页示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }

        .pagination.rounded li a,
        .pagination.rounded li.current {
            border-radius: 50%;
            width: 36px;
            height: 36px;
            line-height: 36px;
            padding: 0;
            text-align: center;
        }

        .pagination.buttons li a {
            background: #f4f4f4;
            border-radius: 4px;
            margin: 0 2px;
        }
        .pagination.buttons li a:hover {
            background: #e0e0e0;
        }
        .pagination.buttons li.current {
            background: #1779ba;
            color: white;
            border-radius: 4px;
            padding: 0.1875rem 0.625rem;
        }

        .pagination.large li a,
        .pagination.large li.current {
            padding: 0.5rem 1rem;
            font-size: 1.1rem;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 分页展示</h1>

        <div class="demo-section">
            <h3>基本分页</h3>
            <nav aria-label="分页">
                <ul class="pagination">
                    <li class="pagination-previous disabled">上一页</li>
                    <li class="current"><span class="show-for-sr">当前页</span>1</li>
                    <li><a href="#" aria-label="第2页">2</a></li>
                    <li><a href="#" aria-label="第3页">3</a></li>
                    <li><a href="#" aria-label="第4页">4</a></li>
                    <li><a href="#" aria-label="第5页">5</a></li>
                    <li class="pagination-next"><a href="#" aria-label="下一页">下一页</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>带省略号的分页</h3>
            <nav aria-label="分页">
                <ul class="pagination">
                    <li class="pagination-previous"><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li class="ellipsis" aria-hidden="true"></li>
                    <li><a href="#">8</a></li>
                    <li><a href="#">9</a></li>
                    <li class="current">10</li>
                    <li><a href="#">11</a></li>
                    <li><a href="#">12</a></li>
                    <li class="ellipsis" aria-hidden="true"></li>
                    <li><a href="#">19</a></li>
                    <li><a href="#">20</a></li>
                    <li class="pagination-next"><a href="#">下一页</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>居中分页</h3>
            <nav aria-label="分页" class="text-center">
                <ul class="pagination">
                    <li class="pagination-previous"><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li class="current">3</li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li class="pagination-next"><a href="#">下一页</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>简单分页</h3>
            <nav aria-label="分页">
                <ul class="pagination">
                    <li class="pagination-previous"><a href="#">&laquo; 上一篇文章</a></li>
                    <li class="pagination-next"><a href="#">下一篇文章 &raquo;</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>圆角分页</h3>
            <nav aria-label="分页">
                <ul class="pagination rounded">
                    <li class="pagination-previous"><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li class="current">3</li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li class="pagination-next"><a href="#">&raquo;</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>按钮式分页</h3>
            <nav aria-label="分页">
                <ul class="pagination buttons">
                    <li class="pagination-previous"><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li class="current">3</li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li class="pagination-next"><a href="#">下一页</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>大号分页</h3>
            <nav aria-label="分页">
                <ul class="pagination large">
                    <li class="pagination-previous"><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li class="current">2</li>
                    <li><a href="#">3</a></li>
                    <li class="pagination-next"><a href="#">下一页</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>带信息的分页</h3>
            <div class="grid-x align-middle">
                <div class="cell auto">
                    <p class="text-muted" style="margin: 0;">显示第 21-30 条，共 100 条记录</p>
                </div>
                <div class="cell shrink">
                    <nav aria-label="分页">
                        <ul class="pagination" style="margin: 0;">
                            <li class="pagination-previous"><a href="#">上一页</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li class="current">3</li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li class="ellipsis"></li>
                            <li><a href="#">10</a></li>
                            <li class="pagination-next"><a href="#">下一页</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>带跳转的分页</h3>
            <div class="grid-x align-middle">
                <div class="cell auto">
                    <nav aria-label="分页">
                        <ul class="pagination" style="margin: 0;">
                            <li class="pagination-previous"><a href="#">上一页</a></li>
                            <li><a href="#">1</a></li>
                            <li class="current">2</li>
                            <li><a href="#">3</a></li>
                            <li class="ellipsis"></li>
                            <li><a href="#">10</a></li>
                            <li class="pagination-next"><a href="#">下一页</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="cell shrink">
                    <div class="input-group" style="margin: 0;">
                        <span class="input-group-label">跳转到</span>
                        <input class="input-group-field" type="number" min="1" max="10" value="2" style="width: 60px;">
                        <div class="input-group-button">
                            <button class="button" type="button">Go</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>每页数量选择</h3>
            <div class="grid-x align-middle">
                <div class="cell shrink">
                    <label style="margin: 0;">
                        每页显示
                        <select style="width: auto; display: inline-block; margin: 0 5px;">
                            <option>10</option>
                            <option selected>25</option>
                            <option>50</option>
                            <option>100</option>
                        </select>
                        条
                    </label>
                </div>
                <div class="cell auto text-right">
                    <nav aria-label="分页">
                        <ul class="pagination" style="margin: 0;">
                            <li class="pagination-previous"><a href="#">上一页</a></li>
                            <li><a href="#">1</a></li>
                            <li class="current">2</li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li class="pagination-next"><a href="#">下一页</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

分页最佳实践 ​

  1. 可访问性：使用 aria-label 和语义化标签
  2. 当前页显示：清晰标识当前所在页
  3. 禁用状态：在首/末页时禁用对应按钮
  4. 省略号：页码过多时使用省略号
  5. 信息提示：显示总记录数和当前位置

总结 ​

本章我们学习了：

  • 基本分页的创建
  • 居中和简单分页
  • 省略号和禁用状态
  • 自定义样式（圆角、按钮式）
  • 带信息和跳转功能的分页
  • JavaScript 动态分页

下一章，我们将学习 Foundation 价格表。

提示：分页是用户导航的重要组件，确保其易于理解和操作。