How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Pagination

Basic

If each page refers to a link, javascript is not needed. However, quick jump and sizer is not available without javascript.


1 2 3 4 5 6 7 
    
    <div class="z-pagination">
        <div class="z-pages">
            <a class="z-page-first disabled">
                <i class="fa fa-angle-double-left"></i>
            </a>
            <a class="z-page-prev disabled">
                <i class="fa fa-angle-left"></i>
            </a>
            <a class="z-page-active">1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
            <a>6</a>
            <a>7</a>
            <a class="z-page-next">
                <i class="fa fa-angle-right"></i>
            </a>
            <a class="z-page-last">
                <i class="fa fa-angle-double-right"></i>
            </a>
        </div>
    </div>

Generated via javascript

We recommend using javascript to generate pagination dynamicly.

The optiontotalmeans the total count of the data.

You must specifytotalbecause the component needs to know the number of pages.


    <!-- html -->
    <div id="my-div"></div>
    // javascript
    $('#my-div').pagination({
        total: 140
    });

Quick jump

    <!-- html -->
    <div id="my-div1"></div>
    // javascript
    $('#my-div1').pagination({
        total: 140,
        showJumper: true
    });

Sizer

    <!-- html -->
    <div id="my-div"></div>
    // javascript
    $('#my-div2').pagination({
        total: 140,
        showSizer: true
    });

Callback

We provide a callback functiononPageChangewhich fires when the page changes.


    <!-- html -->
    <div id="my-div1"></div>
    // javascript
    $('#my-div3').pagination({
        total: 356,
        onPageChange: function(pageNo, pageSize) {
            alert('Go to page ' + pageNo);
        }
    });

Options

Name Type Default Desc
pageSize Number 10 Count per page
pageDisplay Number 10 How many pages are displayed
total Number 0 Total count of the data
current Number 1 Current page
showJumper Boolean false Show quick jump or not
showSizer Boolean false Show sizer or not
pageSizeOptions Array [10, 20, 30] Options for the sizer
onPageChange Function function(pageNo, pageSize) {} Fires when the page is changed
param: pageNo - the new page number
param: pageSize - the new page size