Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

218
Visualizações
La paginación no funciona al filtrar. ¿Cómo puedo arreglar?

Tengo una tabla de datos. Datatable tiene resultado y paginación. El resultado funciona bien, pero al filtrar, la paginación se mueve según el resultado. Esta es la página normal. ingrese la descripción de la imagen aquí

Filtrado pero aún 9 página. Y resultado 10.

ingrese la descripción de la imagen aquí

ahora el resultado es 20 pero página 5. Porque en el caso normal, cuando haces 20, se convierte en 5 páginas. ¿Cómo puedo arreglar?

ingrese la descripción de la imagen aquí

 const [currentPage, setCurrentPage] = useState(1); const [select, setSelect] = useState(10); function handleChange(e) { setSelect(e.target.value); } const indexOfLast = currentPage * select; const indexOfFirst = indexOfLast - select; const splitData = rows.slice(indexOfFirst, indexOfLast); const totalPages = Math.ceil(rows.length / select); const renderHeadingRow = (item) => { return <td>{item}</td>; }; const renderRow = (item, index) => { console.log(splitData[index]) return ( <tr key={index}> {splitData[index] ?.filter((val) => { if (searchWord == "") { return val; } else if(item[1].toLowerCase().includes(searchWord.toLowerCase())){ return val } else if(item[2].toLowerCase().includes(searchWord.toLowerCase())){ return val } else if(item[5].toLowerCase().includes(searchWord.toLowerCase())){ return val } }) .map((data, no) => { return <td>{splitData[index][no]}</td>; })} </tr> ); }; const theadData = <tr>{heading.map(renderHeadingRow)}</tr>; const tbodyData = splitData.map(renderRow);
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Puede intentar usar useEffect para tener un efecto secundario para el filtrado de filas. Todos los datos mostrados y el cálculo total de la página deben basarse en filas filtradas en lugar de filas originales.

 const [currentPage, setCurrentPage] = useState(1); const [select, setSelect] = useState(10); const [filteredRows, setFilteredRows] = useState(rows || []) function handleChange(e) { setSelect(e.target.value); } React.useEffect(() => { const updatedCurrentPage = 1 const updatedRows = rows.filter((item) => { if (searchWord == "") { return item; } else if(item[1].toLowerCase().includes(searchWord.toLowerCase())){ return item; } else if(item[2].toLowerCase().includes(searchWord.toLowerCase())){ return item; } else if(item[5].toLowerCase().includes(searchWord.toLowerCase())){ return item; } }) const totalPages = Math.ceil(updatedRows.length / select); setFilteredRows(updatedRows) //set filtered rows when `searchWord` changes setCurrentPage(1) //reset current page to 1 if applying filters }, [searchWord]) const renderHeadingRow = (item) => { return <td>{item}</td>; }; const renderRow = (item, index) => { return ( <tr key={index}> { item.map((data) => { return <td>{data}</td>; })} </tr> ); }; const indexOfLast = currentPage * select; const indexOfFirst = indexOfLast - select; const splitData = filteredRows.slice(indexOfFirst, indexOfLast); //use `filteredRows` for display const totalPages = Math.ceil(filteredRows.length / select); //use `filteredRows` to calculate total pages const theadData = <tr>{heading.map(renderHeadingRow)}</tr>; const tbodyData = displayedRows.map(renderRow);
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda