Codesandbox Exemple: https://codesandbox.io/s/s/s réact-table-pagination-ne-travaillant-xt4yw
J'utilise le paquet de table de réact (version 7.1.0). P>
J'ai une table qui montre certaines factures.
Je récupère toutes les données sur la charge initiale. Ensuite, je souhaite appliquer une pagination côté client à ces données afin que seuls certains des résultats montrent à une heure. P>
Mes données ont 139 éléments dedans. P>
L'utilisateur sera Initialement voir 10 résultats et être capable de "montrer plus". Actuellement, cela est implémenté dans un champ Select, qui met à jour le (dans mon exemple, j'utilise de fausses données ne provenant de tout point final.) P> J'utilise le Cependant, il doit y avoir quelque chose que je manque, car la pagination n'utilise pas, malgré Pagesize code> p> USEPAGINATION CODE> Crochet de la même manière que dans cet exemple officiel: https://codesandbox.io/s/github/tannerLinsley/reac-table/tree/mee/examples/pagination?file=/src /App.js p> pageIndex code> et pagesize code> être défini clairement. p> "pageIndex": 0,
"pageSize": 10,
3 Réponses :
Vous devriez essayer d'utiliser ces lignes de code,
defaultPageSize={10}
pageSizeOptions={[10,20,30,40,50]}
showPaginationBottom={true}
Pourriez-vous me montrer comment appliquer cela à mon code pour résoudre mon problème? De ce que je peux voir cela ne s'applique pas à la table V7 réagissante
Il vous suffit d'ajouter ces lignes dans la balise de la table réactive, comme suit: `<<< réactable Vous devez essayer d'utiliser ces lignes de code, defaultPagesize = {10} PagesizeOptions = {[10,20,30,40,50]} showpaginationbottom = {vrai } ...... />
Peut-être que vous pouvez essayer cela:
function Table({
columns,
data,
updateMyData,
}) {
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: false,
}),
[]
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
flatColumns,
prepareRow,
setColumnOrder,
state,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn,
updateMyData,
initialState: { pageIndex: 0, pageSize: 10 },
},
useColumnOrder,
usePagination
)
const spring = React.useMemo(
() => ({
type: 'spring',
damping: 50,
stiffness: 100,
}),
[]
)
return (
<>
<br></br>
<div>Showing the {page.length} </div>
<br></br>
<div className="pagination" >
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{'<<'}
</button>{' '}
<button onClick={() => previousPage()} disabled={!canPreviousPage}>
{'<'}
</button>{' '}
<button onClick={() => nextPage()} disabled={!canNextPage}>
{'>'}
</button>{' '}
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{'>>'}
</button>{' '}
<span >
Page{' '}
{/* <strong> */}
{pageIndex + 1} of {pageOptions.length}
{/* </strong>{' '} */}
</span>
<span>
Go to page:{' '}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={e => {
const page = e.target.value ? Number(e.target.value) - 1 : 1
gotoPage(page)
}}
style={{ width: '100px' }}
/>
</span>{' '}
<select
value={pageSize}
onChange={e => {
setPageSize(Number(e.target.value))
}}
>
{[5, 10, 20, 30, 40, 50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</div>
</>
)
}
Vous êtes itération sur Un tableau d'objets de rangée Ce que vous devriez utiliser est Un éventail de lignes pour la page Voici une fourchette de votre code et de votre code de code avec ce changement mis en œuvre. Partout où vous avez itérité sur les éléments des «lignes» a été changé pour plutôt itérer sur «page», et cela fonctionne comme prévu. lignes dans table.jsx , ce qui est contraire à votre résultat souhaité. lignes est la liste de toutes les lignes détenues par les données, comme décrit dans l'API Docs :
page , comme décrit dans le usepagination docs :
pageIndex .
Merci beaucoup mier, xacty mon problème :)