Change pagination method
Hello everybody, I am trying to implement pagination with a datagrid, but my API do not use "_start" and "_end" but it use "page" as GET parameter with a default page size set on the API side. How can change the pagination method to use "page" instead of "_start" and "_end" ?
31 Replies
foreign-sapphireβ’2y ago
Hey @harisris you can run
swizzle
command to export the data provider (Is a feature of @pankod/refine-cli
)
And you can customize that as you like.
For more info about swizzle check out https://refine.dev/docs/packages/documentation/cli/#swizzle
We currently don't have a quick way to change this by an option but a feature to allow this and more customizations for data providers is on our backlog πharsh-harlequinβ’2y ago
Hi @aliemirs i am going to try and get back to you if i have an issue. Thank you for your efficacity π
I've made this working and it display the 30 first (the pageSize do not change anything in my case) as i want but i would like to know in which part of the file can I overwrite the page changing(made the changing page buttons work), to display the other query result ?
Which hook are you using? useList, useTable, useDataGrid etc.
harsh-harlequinβ’2y ago
Iβm using useDataGrid
foreign-sapphireβ’2y ago
https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#return-values check out this doc
useDataGrid | refine
By using useDataGrid, you are able to get properties that are compatible with MUI X
component. All features such as sorting, filtering and pagination comes as out of box. For all the other features, you can refer to the MUI X
documentation.foreign-sapphireβ’2y ago
useDataGrid
returns setCurrent
function to change the page
In your case, current
is mapped to page
so i think this will take care of your issue πharsh-harlequinβ’2y ago
Thank you @aliemirs but is any way to do it in the DataProvider because i've got many DataGrid ?
foreign-sapphireβ’2y ago
@harisris sorry i couldn't understand the issue here. After you override the
getList
method of the data provider and passing that to the dataProvider
prop, doesn't the pagination works already? refine internally stores the page as current
but in the data provider it will be converted to page
by your code and all should be good. Can you please elaborate the not-working part πharsh-harlequinβ’2y ago
i override the
getList
to set the page
with current
as value of the parameter page
which I get from the GET url but i would like to know how can make the change page button work because now the pagination do not work ?foreign-sapphireβ’2y ago
Can this be related with the
total
value returned from the getList
method?
By default @pankod/refine-simple-rest
reads it from the x-total-count
headerharsh-harlequinβ’2y ago
I think it can be related
i check and get back if i have an other issue π
foreign-sapphireβ’2y ago
In your API it can be something else or some property in the response. When it's undefined or 0, pagination will not work (obviously π€£ ) Let's check that and I'll be waiting for your update π
harsh-harlequinβ’2y ago
when i set
total
to a big number, the pagination work but i need to update the GET parameter page
to make a new api call with the new page
in which part of the DataProvider should i make this update ?
the api return a 400 error when i put the page 0 and return the page 1 for undefinedforeign-sapphireβ’2y ago
About updating the
page
, you mean the current
from the parameters of the getList
? If so, it's handled by the datagrid but of course you can use setCurrent
from useDataGrid
to update that dynamically or use initialCurrent
to pass a default value.
If the issue is with page
URL parameter and it having edge cases to be handled, you can do that in the getList
method as well.
query
object is stringified and appended to the request urlharsh-harlequinβ’2y ago
ok thank you, but will the
getList
trigger the changing of the page when i click on the button or should i do also in the getList ?