tabla reactstrap react paginar hoc codepen bootstrap array reactjs pagination

reactstrap - cómo implementar la paginación en reactJs



react table pagination (6)

Soy nuevo en ReactJS y estoy creando una aplicación TODO simple en él. En realidad, es una aplicación muy básica sin conexión db, las tareas se almacenan en una matriz. Agregué editar y eliminar la funcionalidad ahora quiero agregar paginación. ¿Cómo lo implemento? Cualquier ayuda será apreciada. Gracias...!!


Implementé la paginación en React JS puro recientemente. Aquí hay una demostración en funcionamiento: http://codepen.io/PiotrBerebecki/pen/pEYPbY

Por supuesto, tendrá que ajustar la lógica y la forma en que se muestran los números de página para que cumpla con sus requisitos.

Código completo:

class TodoApp extends React.Component { constructor() { super(); this.state = { todos: [''a'',''b'',''c'',''d'',''e'',''f'',''g'',''h'',''i'',''j'',''k''], currentPage: 1, todosPerPage: 3 }; this.handleClick = this.handleClick.bind(this); } handleClick(event) { this.setState({ currentPage: Number(event.target.id) }); } render() { const { todos, currentPage, todosPerPage } = this.state; // Logic for displaying todos const indexOfLastTodo = currentPage * todosPerPage; const indexOfFirstTodo = indexOfLastTodo - todosPerPage; const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo); const renderTodos = currentTodos.map((todo, index) => { return <li key={index}>{todo}</li>; }); // Logic for displaying page numbers const pageNumbers = []; for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) { pageNumbers.push(i); } const renderPageNumbers = pageNumbers.map(number => { return ( <li key={number} id={number} onClick={this.handleClick} > {number} </li> ); }); return ( <div> <ul> {renderTodos} </ul> <ul id="page-numbers"> {renderPageNumbers} </ul> </div> ); } } ReactDOM.render( <TodoApp />, document.getElementById(''app'') );



Publiqué un componente solo para fines de paginación. Aquí está .

npm install pagination-component --save


Recientemente creé este componente de paginación que implementa la lógica de búsqueda como los resultados de búsqueda de Google:

import React, { PropTypes } from ''react'';   const propTypes = {     items: PropTypes.array.isRequired,     onChangePage: PropTypes.func.isRequired,     initialPage: PropTypes.number    }   const defaultProps = {     initialPage: 1 }   class Pagination extends React.Component {     constructor(props) {         super(props);         this.state = { pager: {} };     }       componentWillMount() {         this.setPage(this.props.initialPage);     }       setPage(page) {         var items = this.props.items;         var pager = this.state.pager;           if (page < 1 || page > pager.totalPages) {             return;         }           // get new pager object for specified page         pager = this.getPager(items.length, page);           // get new page of items from items array         var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);           // update state         this.setState({ pager: pager });           // call change page function in parent component         this.props.onChangePage(pageOfItems);     }       getPager(totalItems, currentPage, pageSize) {         // default to first page         currentPage = currentPage || 1;           // default page size is 10         pageSize = pageSize || 10;           // calculate total pages         var totalPages = Math.ceil(totalItems / pageSize);           var startPage, endPage;         if (totalPages <= 10) {             // less than 10 total pages so show all             startPage = 1;             endPage = totalPages;         } else {             // more than 10 total pages so calculate start and end pages             if (currentPage <= 6) {                 startPage = 1;                 endPage = 10;             } else if (currentPage + 4 >= totalPages) {                 startPage = totalPages - 9;                 endPage = totalPages;             } else {                 startPage = currentPage - 5;                 endPage = currentPage + 4;             }         }           // calculate start and end item indexes         var startIndex = (currentPage - 1) * pageSize;         var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);           // create an array of pages to ng-repeat in the pager control         var pages = _.range(startPage, endPage + 1);           // return object with all pager properties required by the view         return {             totalItems: totalItems,             currentPage: currentPage,             pageSize: pageSize,             totalPages: totalPages,             startPage: startPage,             endPage: endPage,             startIndex: startIndex,             endIndex: endIndex,             pages: pages         };     }       render() {         var pager = this.state.pager;           return (             <ul className="pagination">                 <li className={pager.currentPage === 1 ? ''disabled'' : ''''}>                     <a onClick={() => this.setPage(1)}>First</a>                 </li>                 <li className={pager.currentPage === 1 ? ''disabled'' : ''''}>                     <a onClick={() => this.setPage(pager.currentPage - 1)}>Previous</a>                 </li>                 {pager.pages.map((page, index) =>                     <li key={index} className={pager.currentPage === page ? ''active'' : ''''}>                         <a onClick={() => this.setPage(page)}>{page}</a>                     </li>                 )}                 <li className={pager.currentPage === pager.totalPages ? ''disabled'' : ''''}>                     <a onClick={() => this.setPage(pager.currentPage + 1)}>Next</a>                 </li>                 <li className={pager.currentPage === pager.totalPages ? ''disabled'' : ''''}>                     <a onClick={() => this.setPage(pager.totalPages)}>Last</a>                 </li>             </ul>         );     } }   Pagination.propTypes = propTypes; Pagination.defaultProps export default Pagination;

Y aquí hay un componente de aplicación de ejemplo que usa el componente de paginación para paginar una lista de 150 elementos de ejemplo:

import React from ''react''; import Pagination from ''./Pagination'';   class App extends React.Component {     constructor() {         super();           // an example array of items to be paged         var exampleItems = _.range(1, 151).map(i => { return { id: i, name: ''Item '' + i }; });           this.state = {             exampleItems: exampleItems,             pageOfItems: []         };           // bind function in constructor instead of render (https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)         this.onChangePage = this.onChangePage.bind(this);     }       onChangePage(pageOfItems) {         // update state with new page of items         this.setState({ pageOfItems: pageOfItems });     }       render() {         return (             <div>                 <div className="container">                     <div className="text-center">                         <h1>React - Pagination Example with logic like Google</h1>                         {this.state.pageOfItems.map(item =>                             <div key={item.id}>{item.name}</div>                         )}                         <Pagination items={this.state.exampleItems} onChangePage={this.onChangePage} />                     </div>                 </div>                 <hr />                 <div className="credits text-center">                     <p>                         <a href="http://jasonwatmore.com" target="_top">JasonWatmore.com</a>                     </p>                 </div>             </div>         );     } }   export default App;

Para más detalles y una demostración en vivo, puedes ver esta publicación


Sample pagination react js working code import React, { Component } from ''react''; import { Pagination, PaginationItem, PaginationLink } from "reactstrap"; let prev = 0; let next = 0; let last = 0; let first = 0; export default class SamplePagination extends Component { constructor() { super(); this.state = { todos: [''a'',''b'',''c'',''d'',''e'',''f'',''g'',''h'',''i'',''j'',''k'',''l'',''m'',''n'',''o'',''p'',''q'',''r'',''s'',''T'',''v'',''u'',''w'',''x'',''y'',''z''], currentPage: 1, todosPerPage: 3, }; this.handleClick = this.handleClick.bind(this); this.handleLastClick = this.handleLastClick.bind(this); this.handleFirstClick = this.handleFirstClick.bind(this); } handleClick(event) { event.preventDefault(); this.setState({ currentPage: Number(event.target.id) }); } handleLastClick(event) { event.preventDefault(); this.setState({ currentPage:last }); } handleFirstClick(event) { event.preventDefault(); this.setState({ currentPage:1 }); } render() { let { todos, currentPage, todosPerPage } = this.state; // Logic for displaying current todos let indexOfLastTodo = currentPage * todosPerPage; let indexOfFirstTodo = indexOfLastTodo - todosPerPage; let currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo); prev = currentPage > 0 ? (currentPage -1) :0; last = Math.ceil(todos.length/todosPerPage); next = (last === currentPage) ?currentPage: currentPage +1; // Logic for displaying page numbers let pageNumbers = []; for (let i = 1; i <=last; i++) { pageNumbers.push(i); } return ( <div> <ul> { currentTodos.map((todo,index) =>{ return <li key={index}>{todo}</li>; }) } </ul><ul id="page-numbers"> <nav> <Pagination> <PaginationItem> { prev === 0 ? <PaginationLink disabled>First</PaginationLink> : <PaginationLink onClick={this.handleFirstClick} id={prev} href={prev}>First</PaginationLink> } </PaginationItem> <PaginationItem> { prev === 0 ? <PaginationLink disabled>Prev</PaginationLink> : <PaginationLink onClick={this.handleClick} id={prev} href={prev}>Prev</PaginationLink> } </PaginationItem> { pageNumbers.map((number,i) => <Pagination key= {i}> <PaginationItem active = {pageNumbers[currentPage-1] === (number) ? true : false} > <PaginationLink onClick={this.handleClick} href={number} key={number} id={number}> {number} </PaginationLink> </PaginationItem> </Pagination> )} <PaginationItem> { currentPage === last ? <PaginationLink disabled>Next</PaginationLink> : <PaginationLink onClick={this.handleClick} id={pageNumbers[currentPage]} href={pageNumbers[currentPage]}>Next</PaginationLink> } </PaginationItem> <PaginationItem> { currentPage === last ? <PaginationLink disabled>Last</PaginationLink> : <PaginationLink onClick={this.handleLastClick} id={pageNumbers[currentPage]} href={pageNumbers[currentPage]}>Last</PaginationLink> } </PaginationItem> </Pagination> </nav> </ul> </div> ); } } ReactDOM.render( <SamplePagination />, document.getElementById(''root'') );


Recientemente he creado una biblioteca que ayuda a lidiar con casos de paginación como:

  • almacenar datos normalizados en Redux
  • almacenamiento en caché de páginas basado en filtros de búsqueda
  • uso simplificado de la lista de reacciones reactivas
  • resultados refrescantes en el fondo
  • almacenar la última página visitada y los filtros usados

La página DEMO implementa todas las características anteriores.

Código fuente que puedes encontrar en Github