Pagination(container, options)

new Pagination(container, options)

Pagination class

Parameters:
Name Type Description
container string | HTMLElement | jQueryObject

Container element or id selector

options object

Option object

Properties
Name Type Attributes Default Description
totalItems number <optional>
10

Total item count

itemsPerPage number <optional>
10

Item count per page

visiblePages number <optional>
10

Display page link count

page number <optional>
1

Display page after pagination draw.

centerAlign boolean <optional>
false

Whether current page keep center or not

firstItemClassName string <optional>
'first-child'

The class name of the first item

lastItemClassName string <optional>
'last-child'

The class name of the last item

template object <optional>

A markup string set to make element

Properties
Name Type Attributes Description
page string | function <optional>

HTML template

currentPage string | function <optional>

HTML template

moveButton string | function <optional>

HTML template

disabledMoveButton string | function <optional>

HTML template

moreButton string | function <optional>

HTML template

usageStatistics boolean <optional>
true

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

Example
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);

Methods

getCurrentPage() → {number}

Get current page

Returns:
number -

Current page

movePageTo(targetPage)

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

Parameters:
Name Type Description
targetPage Number

Target page

Example
pagination.movePageTo(10);

reset(totalItems)

Reset pagination

Parameters:
Name Type Description
totalItems *

Redraw page item count

Example
pagination.reset();
pagination.reset(100);

setItemsPerPage(itemCount)

Set count of items per page

Parameters:
Name Type Description
itemCount number

Item count

setTotalItems(itemCount)

Set total count of items

Parameters:
Name Type Description
itemCount number

Total item count

Events

afterMove

Parameters:
Name Type Description
eventData object

Custom event object

page number

Moved page

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

beforeMove

Parameters:
Name Type Description
eventData object

Custom event object

page Number

Moved page

Example
paganation.on('beforeMove', function(eventData) {
    var currentPage = eventData.page;

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