Estoy usando el siguiente código para la paginación.
<ul className="pagination"> <li className="page-item"> <button className="page-link btn btn-success btn-block" onClick={prev} >Previous</button> </li> <li className="page-item"> <button className="page-link btn btn-success btn-block " onClick={next}>Next</button> </li> </ul> const next = () => { if (page <= lastPage) { setPage(page + 1); } } const prev = () => { if (page > 1) { setPage(page - 1); } } mi requisito es cuando se muestran los datos de la first page , entonces el botón prev debe estar deshabilitado. cuando se muestran los datos de la lastpage , el next botón debe estar deshabilitado.
Quiero decir if(page==1) deshabilitar prev y if(page==lastPage) deshabilitar next . ¿Cómo puedo hacerlo?
Puede deshabilitar condicionalmente un botón usando una expresión en la propiedad disabled del botón. Por ejemplo, para el botón Anterior, puede hacer esto,
<button disabled={page == 1} className="page-link btn btn-success btn-block" onClick={prev} >Previous</button> También puede seguir lo mismo para el botón Siguiente. Simplemente cambie la expresión a page == lastPage
Pero asegúrese de que la propiedad de la page sea un estado del componente para que React actualice automáticamente el componente cuando cambie. Con respecto a su uso de setPage , supongo que ya es el caso
Puede implementar otros métodos como deshabilitar el botón en la carga de la página o algo así, pero si desea mantenerlo simple, simplemente agregue alertas.
NOTA: Tenía un error en el primer condicional porque si tiene 50 páginas y la página real es 50, la condición (page <= lastpage) será verdadera y enviará al usuario a la página 51 que no existe.
const next = () => { if (page < lastPage) { setPage(page + 1); } else { alert("This is the last page"); } } const prev = () => { if (page > 1) { setPage(page - 1); } else { alert("This is the first page"); } } <ul className="pagination"> <li className="page-item"> <button className="page-link btn btn-success btn-block" onClick={prev}>Previous</button> </li> <li className="page-item"> <button className="page-link btn btn-success btn-block " onClick={next}>Next</button> </li> </ul>