logo

/Pagination|v3.4.1

Class

new Pagination(container, options)pagination.jsline 83

Pagination class

PARAMETERS
NameTypeDescription

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
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. Refer to Getting Started: How to use template.

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
// 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
NameTypeDescription

targetPage

Number

Target page

EXAMPLES
pagination.movePageTo(10);

reset(totalItems)pagination.jsline 322

Reset pagination

PARAMETERS
NameTypeDescription

totalItems

*

Redraw page item count

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

setItemsPerPage(itemCount)pagination.jsline 386

Set count of items per page

PARAMETERS
NameTypeDescription

itemCount

number

Item count

setTotalItems(itemCount)pagination.jsline 378

Set total count of items

PARAMETERS
NameTypeDescription

itemCount

number

Total item count

Events

afterMovepagination.jsline 371

PROPERTIES
NameTypeDescription

page

number

Moved page

EXAMPLES
paganation.on('afterMove', (event) => {
     const currentPage = event.page;
     console.log(currentPage);
});

beforeMovepagination.jsline 355

PROPERTIES
NameTypeDescription

page

number

Moved page

EXAMPLES
paganation.on('beforeMove', (event) => {
    const currentPage = event.page;

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