new Pagination(container, options)pagination.jsline 76
Pagination class
PARAMETERS
Name Type Description container
stringHTMLElementjQueryObject
Container element or selector.
In case of a string, it is considered as an id selector and find the element by id.
If there is no element, it is considered as a selector and find the element by querySelector().
Passing jQueryObject and considering an id selector at first will be deprecated in v4.0.0.options
object
Option object
PROPERTIES
Name Type Description 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. Refer to Getting Started: How to use template.
PROPERTIES
Name Type Description 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 387
Get current page
RETURNS:
{number
} - Current page
movePageTo(targetPage)pagination.jsline 331
Move to specific page, redraw list.
Before move fire beforeMove event, After move fire afterMove event.PARAMETERS
Name Type Description targetPage
Number
Target page
EXAMPLES
pagination.movePageTo(10);
reset(totalItems)pagination.jsline 315
Reset pagination
PARAMETERS
Name Type Description totalItems
*
Redraw page item count
EXAMPLES
pagination.reset(); pagination.reset(100);
setItemsPerPage(itemCount)pagination.jsline 379
Set count of items per page
PARAMETERS
Name Type Description itemCount
number
Item count
setTotalItems(itemCount)pagination.jsline 371
Set total count of items
PARAMETERS
Name Type Description itemCount
number
Total item count
Events
afterMovepagination.jsline 364
PROPERTIES
Name Type Description page
number
Moved page
EXAMPLES
paganation.on('afterMove', function(evt) { var currentPage = evt.page; console.log(currentPage); });
beforeMovepagination.jsline 348
PROPERTIES
Name Type Description page
number
Moved page
EXAMPLES
paganation.on('beforeMove', function(evt) { var currentPage = evt.page; if (currentPage === 10) { return false; // return true; } });