new Pagination(container, options)pagination.jsline 83
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
// ES6 import Pagination from 'tui-pagination'; // CommonJS const Pagination = require('tui-pagination'); // Browser const Pagination = tui.Pagination; const container = document.getElementById('pagination'); const 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>' } }; const pagination = new Pagination(container, options);
Instance Methods
getCurrentPage()pagination.jsline 394
Get current page
RETURNS:
{number
} - Current page
movePageTo(targetPage)pagination.jsline 338
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 322
Reset pagination
PARAMETERS
Name Type Description totalItems
*
Redraw page item count
EXAMPLES
pagination.reset(); pagination.reset(100);
setItemsPerPage(itemCount)pagination.jsline 386
Set count of items per page
PARAMETERS
Name Type Description itemCount
number
Item count
setTotalItems(itemCount)pagination.jsline 378
Set total count of items
PARAMETERS
Name Type Description itemCount
number
Total item count
Events
afterMovepagination.jsline 371
PROPERTIES
Name Type Description page
number
Moved page
EXAMPLES
paganation.on('afterMove', (event) => { const currentPage = event.page; console.log(currentPage); });
beforeMovepagination.jsline 355
PROPERTIES
Name Type Description page
number
Moved page
EXAMPLES
paganation.on('beforeMove', (event) => { const currentPage = event.page; if (currentPage === 10) { return false; // return true; } });