logo

/Pagination|v3.3.1

Class

new Pagination(container, options)pagination.jsline 70

Pagination class

PARAMETERS
NameTypeDescription

container

stringHTMLElementjQueryObject

Container element or id selector

options

object

Option object

PROPERTIES
NameTypeDescription

totalItems

number = 10

Total item count

itemsPerPage

number = 10

Item count per page

visiblePages

number = 10

Display page link count

page

number = 1

Display page after pagination draw.

centerAlign

boolean = false

Whether current page keep center or not

firstItemClassName

string = 'first-child'

The class name of the first item

lastItemClassName

string = 'last-child'

The class name of the last item

template

[ object ]

A markup string set to make element

PROPERTIES
NameTypeDescription

page

[ stringfunction ]

HTML template

currentPage

[ stringfunction ]

HTML template

moveButton

[ stringfunction ]

HTML template

disabledMoveButton

[ stringfunction ]

HTML template

moreButton

[ stringfunction ]

HTML template

usageStatistics

boolean = true

Send the hostname to google analytics.
If you do not want to send the hostname, this option set to false.

EXAMPLES
var Pagination = tui.Pagination; // or require('tui-pagination')

var container = document.getElementById('pagination');
var options = { // below default value of options
     totalItems: 10,
     itemsPerPage: 10,
     visiblePages: 10,
     page: 1,
     centerAlign: false,
     firstItemClassName: 'tui-first-child',
     lastItemClassName: 'tui-last-child',
     template: {
         page: '<a href="#" class="tui-page-btn">{{page}}</a>',
         currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}</strong>',
         moveButton:
             '<a href="#" class="tui-page-btn tui-{{type}}">' +
                 '<span class="tui-ico-{{type}}">{{type}}</span>' +
             '</a>',
         disabledMoveButton:
             '<span class="tui-page-btn tui-is-disabled tui-{{type}}">' +
                 '<span class="tui-ico-{{type}}">{{type}}</span>' +
             '</span>',
         moreButton:
             '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip">' +
                 '<span class="tui-ico-ellip">...</span>' +
             '</a>'
     }
};
var pagination = new Pagination(container, options);

Instance Methods

getCurrentPage()pagination.jsline 378

Get current page

RETURNS:
{

number

} - Current page

movePageTo(targetPage)pagination.jsline 322

Move to specific page, redraw list.
Before move fire beforeMove event, After move fire afterMove event.

PARAMETERS
NameTypeDescription

targetPage

Number

Target page

EXAMPLES
pagination.movePageTo(10);

reset(totalItems)pagination.jsline 306

Reset pagination

PARAMETERS
NameTypeDescription

totalItems

Redraw page item count

EXAMPLES
pagination.reset();
pagination.reset(100);

setItemsPerPage(itemCount)pagination.jsline 370

Set count of items per page

PARAMETERS
NameTypeDescription

itemCount

number

Item count

setTotalItems(itemCount)pagination.jsline 362

Set total count of items

PARAMETERS
NameTypeDescription

itemCount

number

Total item count

Events

afterMovepagination.jsline 355

PROPERTIES
NameTypeDescription

page

number

Moved page

EXAMPLES
paganation.on('afterMove', function(evt) {
     var currentPage = evt.page;
     console.log(currentPage);
});

beforeMovepagination.jsline 339

PROPERTIES
NameTypeDescription

page

number

Moved page

EXAMPLES
paganation.on('beforeMove', function(evt) {
    var currentPage = evt.page;

    if (currentPage === 10) {
        return false;
        // return true;
    }
});
Resizable