jaimeneeves / hug-pagination

Uma Library de paginação desenvolvida em VanillaJS

Hug Pagination

Uma library desenvolvida para ser usada em qualquer Framework FrontEnd. Não retorna nenhum HTML, mas um objeto que pode ser usado para gerenciar o layout da sua paginação.

Instalação

$ npm i hug-pagination

Uso

A função aceita os seguintes parametros:

• totalItems (obrigatório) número total de itens para ser paginado
• currentPage (opcional) página ativa, o padrão é primeira paǵina, igual a 1
• pageSize (opcional) número de itens por página, o padrão é 10
• maxPages (opcional) número máximo de links para nevagação das páginas a serem exibidos, o padrão é 10

A saída é um objeto contendo todas as informações necessárias para exibir a página atual de itens e os links para a navegação da página.

Exemplos

totalItems: 150

new HugPaginationJS(150).init();

{
	"totalItems": 150,
	"currentPage": 1,
	"pageSize": 10,
	"totalPages": 15,
	"startPage": 1,
	"endPage": 10,
	"startIndex": 0,
	"endIndex": 9,
	"pages": [
		1,
		2,
		3,
		4,
		5,
		6,
		7,
		8,
		9,
		10
	]
}

totalItems: 150, currentPage: 7

new HugPaginationJS(150,{ currentPage: 7 }).init();

{
	"totalItems": 150,
	"currentPage": 7,
	"pageSize": 10,
	"totalPages": 15,
	"startPage": 2,
	"endPage": 11,
	"startIndex": 60,
	"endIndex": 69,
	"pages": [
		2,
		3,
		4,
		5,
		6,
		7,
		8,
		9,
		10,
		11
	]
}

Exemplo em ReactJS

Abaixo um exemplo de como você pode usar em um componente ReactJS

// App.js

import './App.css';
import React from 'react';
import Pagination from './components/Pagination';

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      data: []
    };

    this.onChangePage = this.onChangePage.bind(this);
  }

  onChangePage(pageOfItems) {
    this.setState({ data: pageOfItems });
  }

  render() {
    return (
      <div className="container mt-5">
        <div className="card mb-5">
          <div className="card-body p-4">
            <h2 className="mb-5">ReactJS Paginate</h2>
            <table className="table">
              <thead>
                <tr>
                  <th>Código</th>
                  <th>Nome</th>
                  <th>Sobrenome</th>
                  <th>Email</th>
                  <th>Idade</th>
                  <th>Cidade</th>
                </tr>
              </thead>
              <tbody>
              { this.state.data.map((item, index) =>
                <tr key={index}>
                  <td>{item.id}</td>
                  <td>{item.first_name}</td>
                  <td>{item.last_name}</td>
                  <td>{item.email}</td>
                  <td>{item.age}</td>
                  <td>{item.city}</td>
                </tr>
              )} 
              </tbody>
            </table>
            <Pagination items={this.state.data} onChangePage={this.onChangePage} />
          </div>
        </div>
      </div>
    )
  }
}

export default App;

// ./components/Pagination.js

import React from 'react';
import PropTypes from 'prop-types';
import HugPaginationJS from 'hug-pagination'
import { data } from '../data'

const propTypes = {
  pageSize: PropTypes.number,
  maxPages: PropTypes.number,
  items: PropTypes.array.isRequired,
  onChangePage: PropTypes.func.isRequired,
}

const defaultProps = {
  pageSize: 10,
  maxPages: 10
}

class Pagination extends React.Component {

  constructor(props) {
    super(props);
    this.state = { pager: {} };
  }
  
  componentWillMount() {
    this.setPage(1);
  }
  
  setPage(page) {
    var params = { currentPage: page, pageSize: 7, maxPages: 10 };
    var pager = this.state.pager;
  
    // data.length: total items
    // params: options
    pager = new HugPaginationJS(data.length, params).init();

    // get new page of items from items array
    var pageOfItems = data.slice(pager.startIndex, pager.endIndex + 1);
  
    // update state
    this.setState({ pager: pager });

    this.props.onChangePage(pageOfItems);
  }
  
  render() {
    var paginate = this.state.pager;

    return (
      <div className="mt-5">
        <ul className="pagination">
          <li className={`page-item first ${paginate.currentPage === 1 ? 'disabled' : ''}`}>
            <a href="javascript:void(0);" className="page-link" onClick={() => this.setPage(1)}>Primeira</a>
          </li>
          <li className={`page-item previous ${paginate.currentPage === 1 ? 'disabled' : ''}`}>
            <a href="javascript:void(0);" className="page-link" onClick={() => this.setPage(paginate.currentPage - 1)}>
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          {paginate.pages.map((page, index) =>
            <li key={index} className={`page-item page-number ${paginate.currentPage === page ? 'active' : ''}`}>
              <a href="javascript:void(0);" className="page-link" onClick={() => this.setPage(page)}>{page}</a>
            </li>
          )}
          <li className={`page-item next ${paginate.currentPage === paginate.totalPages ? 'disabled' : ''}`}>
            <a href="javascript:void(0);" className="page-link" onClick={() => this.setPage(paginate.currentPage + 1)}>
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
          <li className={`page-item last ${paginate.currentPage === paginate.totalPages ? 'disabled' : ''}`}>
            <a href="javascript:void(0);" className="page-link" onClick={() => this.setPage(paginate.totalPages)}>Última</a>
          </li>
        </ul>
      </div>
    )
  }
}

Pagination.propTypes = propTypes;
Pagination.defaultProps = defaultProps;
export default Pagination;