Pagination problem on Server Side mode about vue3-easy-data-table HOT 8 CLOSED

@sdezza I am afraid that you didn't use the loading data when requesting new data from the server,
please try this:

methods: {
      async getCalls(){
	this.loading = true; // add this
        await axios
          .get(`/api/calls/?page=${this.serverOptions.page}`)
          .then(response => {
            this.items = response.data.results
            this.serverItemsLength = response.data.count
	    this.loading = false // add this
          })
          .catch(error => {
            console.log(error);
          })
      },
    },

from vue3-easy-data-table.

@sdezza According to your response, If the second page is not the last page, It seems that your API is responding two rows for each page, so I think you should set the rowsPerPage in serverOptions to 2.

from vue3-easy-data-table.

Actually, It was an example of my response, in reality I have 10 items per page. But even changing rowsPerPage to 10 doesn't solve the problem

from vue3-easy-data-table.

@sdezza can you describe

the next pages are no more loaded

more detailedly? is the pagination button unavailable or the serverOptions doesn't update?

from vue3-easy-data-table.

@sdezza

watch: {
      serverOptions(value) {
        this.serverOptions.page = value.page
        this.getCalls()
      },
    },

this.serverOptions.page = value.page

↑doesn't seem to be necessary, and since you are watching an object variable (serverOptions),
It is better to use a deep watcher.

watch: {
  serverOptions: {
    handler(value) {
      this.getCalls();
    },
    deep: true,
  }
},

from vue3-easy-data-table.

Thanks for the tips with deep watcher, I have updated my code (still with the same problem)

Here is the problem Flow:

• 1 Page is loaded wich is ok
• On click "Next", second page is loaded, which is also ok
  
• On click "Next" Again, Page 2 is always loaded instead of Page 3,4,5,.....
  

I really don't see where the problem comes from :/

from vue3-easy-data-table.

Works!! 👍
I thought this.loading was just handling the css loader...
Thanks for your support and this package

from vue3-easy-data-table.

@sdezza It will become very confusing when forgetting to use loading, and I will solve this problem in the future version, thank you for reporting.

from vue3-easy-data-table.