Foundation Pagination

Foundation's pagination component is used for navigation between multi-page content. This chapter will introduce various uses of pagination.

Basic Pagination

Use the .pagination class to create basic pagination:

<nav aria-label="Pagination">
    <ul class="pagination">
        <li class="pagination-previous disabled">Previous</li>
        <li class="current"><span class="show-for-sr">Current Page</span>1</li>
        <li><a href="#" aria-label="Page 2">2</a></li>
        <li><a href="#" aria-label="Page 3">3</a></li>
        <li><a href="#" aria-label="Page 4">4</a></li>
        <li class="ellipsis" aria-hidden="true"></li>
        <li><a href="#" aria-label="Page 12">12</a></li>
        <li><a href="#" aria-label="Page 13">13</a></li>
        <li class="pagination-next"><a href="#" aria-label="Next Page">Next</a></li>
    </ul>
</nav>

Centered Pagination

<nav aria-label="Pagination">
    <ul class="pagination text-center">
        <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
    </ul>
</nav>

Simple Pagination

Only show previous and next:

<nav aria-label="Pagination">
    <ul class="pagination">
        <li class="pagination-previous"><a href="#">&laquo; Previous</a></li>
        <li class="pagination-next"><a href="#">Next &raquo;</a></li>
    </ul>
</nav>

Disabled State

<ul class="pagination">
    <li class="pagination-previous disabled">Previous</li>
    <li class="current">1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="pagination-next"><a href="#">Next</a></li>
</ul>

Ellipsis

Use .ellipsis to represent omitted page numbers:

<ul class="pagination">
    <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
</ul>

Custom Styles

Rounded Pagination

<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>

Button-Style Pagination

<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="#">Previous</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="#">Next</a></li>
</ul>

Colored Pagination

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

Pagination Info

Display current page information:

<div class="grid-x align-middle">
    <div class="cell auto">
        <p class="text-muted">Showing 1-10 of 100 items</p>
    </div>
    <div class="cell shrink">
        <ul class="pagination" style="margin: 0;">
            <li class="pagination-previous disabled">Previous</li>
            <li class="current">1</li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="pagination-next"><a href="#">Next</a></li>
        </ul>
    </div>
</div>

Items Per Page

Combined with dropdown:

<div class="grid-x align-middle">
    <div class="cell shrink">
        <label style="margin-right: 10px;">
            Show
            <select style="width: auto; display: inline-block; margin: 0 5px;">
                <option>10</option>
                <option>25</option>
                <option>50</option>
                <option>100</option>
            </select>
            per page
        </label>
    </div>
    <div class="cell auto text-right">
        <ul class="pagination" style="margin: 0;">
            <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
        </ul>
    </div>
</div>

Go to Page

<div class="grid-x align-middle">
    <div class="cell auto">
        <ul class="pagination" style="margin: 0;">
            <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
        </ul>
    </div>
    <div class="cell shrink">
        <div class="input-group" style="margin: 0;">
            <span class="input-group-label">Go to</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 Pagination

Dynamically generate pagination:

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

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

    // Page numbers
    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>';
        }
    }

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

    html += '</ul>';

    $(container).html(html);

    // Bind click events
    $(container).find('a[data-page]').on('click', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        createPagination(page, totalPages, container);
        // Trigger page load
        loadPage(page);
    });
}

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

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Pagination Example</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 Pagination Showcase</h1>

        <div class="demo-section">
            <h3>Basic Pagination</h3>
            <nav aria-label="Pagination">
                <ul class="pagination">
                    <li class="pagination-previous disabled">Previous</li>
                    <li class="current"><span class="show-for-sr">Current Page</span>1</li>
                    <li><a href="#" aria-label="Page 2">2</a></li>
                    <li><a href="#" aria-label="Page 3">3</a></li>
                    <li><a href="#" aria-label="Page 4">4</a></li>
                    <li><a href="#" aria-label="Page 5">5</a></li>
                    <li class="pagination-next"><a href="#" aria-label="Next Page">Next</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>Pagination with Ellipsis</h3>
            <nav aria-label="Pagination">
                <ul class="pagination">
                    <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>Centered Pagination</h3>
            <nav aria-label="Pagination" class="text-center">
                <ul class="pagination">
                    <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>Simple Pagination</h3>
            <nav aria-label="Pagination">
                <ul class="pagination">
                    <li class="pagination-previous"><a href="#">&laquo; Previous Article</a></li>
                    <li class="pagination-next"><a href="#">Next Article &raquo;</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>Rounded Pagination</h3>
            <nav aria-label="Pagination">
                <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>Button-Style Pagination</h3>
            <nav aria-label="Pagination">
                <ul class="pagination buttons">
                    <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>Large Pagination</h3>
            <nav aria-label="Pagination">
                <ul class="pagination large">
                    <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
                </ul>
            </nav>
        </div>

        <div class="demo-section">
            <h3>Pagination with Info</h3>
            <div class="grid-x align-middle">
                <div class="cell auto">
                    <p class="text-muted" style="margin: 0;">Showing 21-30 of 100 items</p>
                </div>
                <div class="cell shrink">
                    <nav aria-label="Pagination">
                        <ul class="pagination" style="margin: 0;">
                            <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Pagination with Go To</h3>
            <div class="grid-x align-middle">
                <div class="cell auto">
                    <nav aria-label="Pagination">
                        <ul class="pagination" style="margin: 0;">
                            <li class="pagination-previous"><a href="#">Previous</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="#">Next</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="cell shrink">
                    <div class="input-group" style="margin: 0;">
                        <span class="input-group-label">Go to</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>Items Per Page Selection</h3>
            <div class="grid-x align-middle">
                <div class="cell shrink">
                    <label style="margin: 0;">
                        Show
                        <select style="width: auto; display: inline-block; margin: 0 5px;">
                            <option>10</option>
                            <option selected>25</option>
                            <option>50</option>
                            <option>100</option>
                        </select>
                        per page
                    </label>
                </div>
                <div class="cell auto text-right">
                    <nav aria-label="Pagination">
                        <ul class="pagination" style="margin: 0;">
                            <li class="pagination-previous"><a href="#">Previous</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="#">Next</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>

Pagination Best Practices

1. Accessibility: Use aria-label and semantic tags
2. Current Page: Clearly mark the current page
3. Disabled State: Disable buttons at first/last page
4. Ellipsis: Use ellipsis when there are too many page numbers
5. Info Display: Show total records and current position

Summary

In this chapter, we learned:

• Creating basic pagination
• Centered and simple pagination
• Ellipsis and disabled states
• Custom styles (rounded, button-style)
• Pagination with info and jump functionality
• JavaScript dynamic pagination

Next chapter, we will learn Foundation Pricing Tables.

---

Tip: Pagination is an important component for user navigation. Make sure it's easy to understand and operate.