es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo implementar botones de paginación que te permitan saltar a cualquier página utilizando Ag Grid en React.js?

Cómo implementar botones de paginación que te permitan saltar a cualquier página utilizando Ag Grid en React.js?

19 Jul, 2023 Programación

Quiero implementar la paginación y los botones de paginación en la parte inferior que permiten saltar a cualquier página, incluyendo botones especiales para la primera página, página anterior, página siguiente y última página.

import { useEffect, useState } from "react";
import axios from "axios";
import { AgGridReact } from 'ag-grid-react';
import React from 'react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

function Read(props) {
  const [record, setRecord] = useState('');

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/comments')
    .then((response) =>{
      console.log(response.data);
      setRecord(response.data);
    })
  }, [])

  function update(data){
    console.log("hello");
  }

const col= [
    { headerName: "Name", field: "name"},
    { headerName: "Email", field: "email"},
    { headerName: "Body", field: "body"},
    {headerName: "", headerClass: 'new-class',
        cellRendererFramework:(params)=>
        <div>
                  <button onclick="{()" ==""> update(params.data)}>Edit</button>
        </div>}
  ]

  return (
    <>
        <div classname="ag-theme-alpine" style="{{height:'400px'," width:="" '700px'}}="">
        <aggridreact columndefs="{col}" rowdata="{record}" pagination="{true}">
        </aggridreact>
      </div>

  );
}

export default Read;

enter image description here
así es como quiero mostrar los números de página.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para implementar botones de paginación en la parte inferior de la cuadrícula, incluyendo botones especiales para la primera página, página anterior, página siguiente y última página, es necesario pasar propiedades adicionales al componente AgGridReact:

    <aggridreact columndefs="{col}" rowdata="{record}" pagination="{true}" paginationpagesize="{10}" número="" de="" filas="" a="" mostrar="" por="" página="" paginationnumberformatter="{(params)" ==""> "..."} // función personalizada para formatear los números de página
  onPaginationChanged={(event) => console.log(event.api.paginationGetCurrentPage())} // controlador de eventos para los cambios de paginación
>

    Para mostrar los números de página en la parte inferior de la cuadrícula, puedes agregar el siguiente estilo CSS:

    .ag-paging-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ag-paging-page-summary-panel {
  display: none;
}

.ag-paging-page-summary-panel,
.ag-paging-button {
  margin-left: 5px;
  margin-right: 5px;
}

    Esto centrará los botones de paginación y ocultará el resumen de la página, permitiendo mostrar solo los botones. Para agregar botones especiales para la primera página, página anterior, página siguiente y última página, puedes crear botones personalizados y llamar a los métodos correspondientes en la instancia de AgGridReact, de esta manera:

    function Read(props) {
  ...

  const gridApi = useRef(null);

  function goToFirstPage() {
    gridApi.current.paginationGoToFirstPage();
  }

  function goToPreviousPage() {
    gridApi.current.paginationGoToPreviousPage();
  }

  function goToNextPage() {
    gridApi.current.paginationGoToNextPage();
  }

  function goToLastPage() {
    gridApi.current.paginationGoToLastPage();
  }

  return (
    <>
      <div classname="ag-theme-alpine" style="{{" height:="" '400px',="" width:="" '700px'="" }}="">
        <aggridreact columndefs="{col}" rowdata="{record}" pagination="{true}" paginationpagesize="{10}" paginationnumberformatter="{(params)" ==""> `${params.value}`}
          onPaginationChanged={(event) => console.log(event.api.paginationGetCurrentPage())}
          onGridReady={(event) => (gridApi.current = event.api)}
        >
          <div classname="ag-paging-panel">
            <button classname="ag-paging-button" onclick="{goToFirstPage}">
              <<
            </button>
            <button classname="ag-paging-button" onclick="{goToPreviousPage}">
              <
            </button>
            <span classname="ag-paging-number">
              Página {gridApi.current ? gridApi.current.paginationGetCurrentPage() + 1 : ''}
            </span>
            <button classname="ag-paging-button" onclick="{goToNextPage}">
              >
            </button>
            <button classname="ag-paging-button" onclick="{goToLastPage}">
              >>
            </button>
          </div>
        </aggridreact>
      </div>

  );
}

export default Read;

    Esto añadirá botones personalizados al panel de paginación y llamará a los métodos correspondientes en la instancia de AgGridReact al hacer clic. Puedes personalizar los botones y el estilo según tus necesidades de diseño.

Comments are closed.