JB Framework

Pagination

• Previous
• 1
• 2
• 3
• 4
• 5
• Next

<ul class="pagination">
    <li class="pagination__item pagination__item--arrow pagination__item--arrow-previous">
        <a class="button pagination__link pagination__link--arrow pagination__link--arrow-previous" href="javascript:void(0)">Previous</a>
    </li>
    <li class="pagination__item pagination__item--number">
        <a class="button pagination__link pagination__link--number" href="javascript:void(0)">1</a>
    </li>
    <li class="pagination__item pagination__item--number">
        <a class="button pagination__link pagination__link--number" href="javascript:void(0)">2</a>
    </li>
    <li class="pagination__item pagination__item--number">
        <span class="button pagination__placeholder">3</span>
    </li>
    <li class="pagination__item pagination__item--number">
        <a class="button pagination__link pagination__link--number" href="javascript:void(0)">4</a>
    </li>
    <li class="pagination__item pagination__item--number">
        <a class="button pagination__link pagination__link--number" href="javascript:void(0)">5</a>
    </li>
    <li class="pagination__item pagination__item--arrow pagination__item--arrow-next">
        <a class="button pagination__link pagination__link--arrow pagination__link--arrow-next" href="javascript:void(0)">Next</a>
    </li>
</ul>

AngularJS

<pagination-container items="colors" default-per-page="3">
    <ul class="list--pretty">
        <li class="list--pretty__item" ng-repeat="color in colors | offset:(data.currentPage - 1)*data.perPage | limitTo:data.perPage">
            <a class="list--pretty__link" ng-cloak ng-href="javascript:void(0)">{{ ::color.name }}</a>
        </li>
    </ul>
    <pagination class="pagination--table"></pagination>
</pagination-container>

Paginated and sortable table (AngularJS)

<pagination-container items="colors" default-per-page="5">
    <table sortable-table default-key="name" default-reverse>
        <thead>
            <tr>
                <td attribute="id" class="shrink" sortable-header>ID</td>
                <td attribute="name" class="grow" sortable-header>Name</td>
                <td attribute="hex" class="shrink" sortable-header>Hex</td>
                <td attribute="user.name" class="shrink" sortable-header>User</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="color in colors | orderBy:sortableKey:sortableReverse | offset:(data.currentPage - 1)*data.perPage | limitTo:data.perPage">
                <td>{{ ::color.id }}</td>
                <td>{{ ::color.name }}</td>
                <td>
                    <code ng-cloak ng-style="{'background': '#' + color.hex}">#{{ ::color.hex }}</code>
                </td>
                <td>{{ ::color.user.name }}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <div class="row">
                        <div class="column column--grow">
                            <label class="label--inline" for="per_page">Per page:</label>
                            <select id="per_page" ng-model="data.perPage" ng-options="o as o for o in perPageOptions"></select>
                        </div>
                        <div class="column column--shrink">
                            <pagination class="pagination--table"></pagination>
                        </div>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
</pagination-container>