Componente de paginación personalizada en JavaScript-TUI. Pagination

Vista prévia

Descripción

TUI. paginación es un pequeño componente de interfaz de usuario de paginación que representa dinámicamente vínculos de paginación con eventos personalizados & compatibilidad con plantillas.

Funcionamiento

Instalación.

# NPM
$ npm install tui-pagination --save

Importa el TUI. Pagination como un módulo.

// ES 6
import {Pagination} from 'tui-pagination';

// CommonJS:
const Pagination = require('tui-pagination');

Cree un contenedor para contener los vínculos de paginación.

<div id="tui-pagination-container">
</div>

Represente una paginación predeterminada dentro del contenedor.

const container = document.getElementById('tui-pagination-container');
const myPagination = new Pagination(container, {



 // options here
});

Todas las opciones de configuración predeterminadas.

const myPagination = new Pagination(container, {




 // Total number of items



totalItems: 10,




// Items per page



itemsPerPage: 10,




// Visible pages



visiblePages: 10,




// Current page



page: 1,




// center aligned



centerAlign: false,




// default classes



firstItemClassName: 'tui-first-child',



lastItemClassName: 'tui-last-child',




// enable usage statistics



usageStatistics: true




});

API methods.

// gets the current page
myPagination.getCurrentPage();

// goes to page x
myPagination.movePageTo(targetPage);

// resets the pagination
myPagination.reset(totalItems);

// sets the number of items per page
myPagination.gsetItemsPerPage(itemCount);

// sets the total number of items
myPagination.setTotalItems(itemCount);

Controladores de eventos disponibles.

// after move
myPagination.on('afterMove', function(eventData) {

var currentPage = eventData.page;

console.log(currentPage);
});

// before move move
myPagination.on('beforeMove', function(eventData) {

var currentPage = eventData.page;


if (currentPage === 10) {


return false;


// return true;

}
});