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

[b1gdanhe]

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

[HC200ok]

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

[b1gdanhe]

Ok, let me try to put it on codesanbox.

[b1gdanhe]

This is the link of the codesanbox Test.

You can check the problem.

I use JSON placeholder for this example

[HC200ok]

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]

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]

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]

@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]

@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]

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]

@pzoechner Could you please provide demo code for reproduction？

[b1gdanhe]

@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]

article