Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In Server-side pagination mode, the page number doesn't switch on view. #232

Closed
b1gdanhe opened this issue Feb 19, 2023 · 12 comments · May be fixed by #251
Closed

In Server-side pagination mode, the page number doesn't switch on view. #232

b1gdanhe opened this issue Feb 19, 2023 · 12 comments · May be fixed by #251

Comments

@b1gdanhe
Copy link

When I request the backend, the responses in ok and i update the servers options.

All things seen work good, but at next page the number of page doesn't change and at the end is not possible to come back to first page unless I reload the view

Screenshot from 2023-02-19 01-22-59
Screenshot from 2023-02-19 01-23-15
Screenshot from 2023-02-19 01-23-27

@HC200ok
Copy link
Owner

HC200ok commented Feb 19, 2023

Could you provide more details? It will be better to have an online reproduction on codesandbox and stuff.

@b1gdanhe
Copy link
Author

Ok, let me try to put it on codesanbox.

@b1gdanhe
Copy link
Author

b1gdanhe commented Feb 19, 2023

This is the link of the codesanbox Test.

You can check the problem.

I use JSON placeholder for this example

@HC200ok
Copy link
Owner

HC200ok commented Feb 20, 2023

Did you use server-items-length and loading props?

Here is a demo you can refer to: https://codesandbox.io/s/server-side-paginate-and-sort-mif1nr?file=/src/App.vue:117-180

@b1gdanhe
Copy link
Author

I solve it.

But the problem, is that the EasyDataTable component don't totally update the serverOptions props inside itself So the try to re-render the component after the switching on new page and it worked.

Thank you for your contribution.

@pzoechner
Copy link

I encounter the same issue. Apart from the mock server, I'm followed the docs. Making use of server-items-length and loading as well. Using the Laravel paginator server-side. Like @b1gdanhe said, it does seem like the footer portion is just not updating properly.

@HC200ok
Copy link
Owner

HC200ok commented Feb 21, 2023

@pzoechner If you are renderingvue3-easy-data-table on the server side template like phtml instead of using restful API on the browser side. I suggest you re-render the component as @b1gdanhe did #232 (comment)

@HC200ok
Copy link
Owner

HC200ok commented Feb 21, 2023

@b1gdanhe vue3-easy-data-table updates serverOptions in javascript (client side). On the server side, you are supposed to re-render the page to update the vue3-easy-data-table.

@pzoechner
Copy link

I'm rendering vue3-easy-data-table on the client-side (Inertia + Vue3 to be exact.) Just wanted to make clear that I'm also having this issue using server-side mode same as OP.
The serverOptions prop is updating as it should but as described by @b1gdanhe, the pagination information in the footer isn't.

@HC200ok
Copy link
Owner

HC200ok commented Feb 21, 2023

@pzoechner Could you please provide demo code for reproduction?

@b1gdanhe
Copy link
Author

@pzoechner in practice, My Vue app send the request to my backend, and when I get the responses, I bind all necessary data and I increment one variable that I defined as key on the vue3-easy-data-table component. Something like this :

<easy-data-table :key="reRender" ></easy-data-table>

After the request in the end of my watcher, I just do reRender++. I force the Vue app to re-Rend the component.

I also found help in this article about my rereading technique

@b1gdanhe
Copy link
Author

article

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants