Pagination - ZUI Documentation

Summary

The pagination pattern defines how content should be divided over multiple pages.

There are no attributes defined for this pattern.

Name	Description
`zui-pagination`	The class that identifies an HTML element as a pagination element.
`zui-pagination-primary`	The primary container which is the left side of a the pagination box.
`zui-pagination-secondary`	The secondary container which is the right side of a the pagination box.
`zui-pagination-from`	The from part in the pager has this class so it can be populated via JavaScript.
`zui-pagination-till`	The till part in the pager has this class so it can be populated via JavaScript.
`zui-pagination-total`	The total part in the pager has this class so it can be populated via JavaScript.

Name	Description
`zui-pagination-margin`	The margin of the pagination box.
`zui-pagination-anchor-margin`	The margin of the anchors in the pagination box.

Example

Previous 1 2 3 4 5 Next

1 - 50 of 50

Markup

<div class="zui-pagination">
    <div class="zui-pagination-primary">
        <a href="#" class="disabled">Previous</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#" class="selected">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">Next</a>
    </div>
    <div class="zui-pagination-secondary">
        <span class="zui-pagination-count">
            <span class="zui-pagination-from">1</span>
            -
            <span class="zui-pagination-till">50</span>
            of
            <span class="zui-pagination-total">50</span>
        </span>
        <a href="#"><i class="zui-icon zui-icon-refresh"></i></a>
    </div>
</div>