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
adverse-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 πrare-sapphireOPβ’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.
rare-sapphireOPβ’2y ago
Iβm using useDataGrid
adverse-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.adverse-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 πrare-sapphireOPβ’2y ago
Thank you @aliemirs but is any way to do it in the DataProvider because i've got many DataGrid ?
adverse-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 πrare-sapphireOPβ’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 ?adverse-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
headerrare-sapphireOPβ’2y ago
I think it can be related
i check and get back if i have an other issue π
adverse-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 π
rare-sapphireOPβ’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 undefinedadverse-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 urlrare-sapphireOPβ’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 ?adverse-sapphireβ’2y ago
Yes it will send another request with the new page number
rare-sapphireOPβ’2y ago
ok thank you πͺ
adverse-sapphireβ’2y ago
π
rare-sapphireOPβ’2y ago
I don't know i doing something wrong but when i click on the changing page button, there is not new API call, as if the click was not triggered
adverse-sapphireβ’2y ago
Can you try to create a reproduction repo/example?
I will also try to reproduce the issue not sure whatβs causing this is a bug or a mis use
rare-sapphireOPβ’2y ago
i can give the DataProvider and a DataGrid
adverse-sapphireβ’2y ago
I guess dataprovider is only differs with the page param youβve shared above right?
Datagrid and the button will be enough then
rare-sapphireOPβ’2y ago
yes i pnly change the getList method
i remove some columns so can read easily
adverse-sapphireβ’2y ago
Thank you checking now, i will get back to you soon
rare-sapphireOPβ’2y ago
ok thank you
adverse-sapphireβ’2y ago
Any reason to not pass the pagination props to the data grid?
Are you trying to have custom buttons for pagination?
rare-sapphireOPβ’2y ago
i try to remove them to see if something will change
i add back the
onPageChange={onPageChange}
and now the get method as send againadverse-sapphireβ’2y ago
So it's working as you expected?
rare-sapphireOPβ’2y ago
yes i'm trying to set the right
total
If is not the case how can I have custom buttons for pagination ?adverse-sapphireβ’2y ago
You can use
current
and setCurrent
from the useDataGrid
hook. Check out the docs here http://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#return-valuesuseDataGrid | 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.adverse-sapphireβ’2y ago
as a matter of fact,
onPageChange
and other pagination props from dataGridProps
are using those methods (setCurrent
, current
, setPageSize
etc.) under the hood
and you can achieve the same functionality by using those π