Ajax is called twice about vuejs-datatable HOT 8 CLOSED

The option of not having to set name and table attributes was purely for convenience. To me it seems a little redundant to have to assign a name to datatable instance if it is the only one on a page. That was my initial reasoning anyway.

That being said, one idea would be to assign a pagerInstance property on the datatable instance in the datatable-pager created hook. Then the datatable would contain a reference to the pager itself. If no pager element is created, that pagerInstance property would be null, allowing the datatable instance to intelligently determine when to issue AJAX requests. That way you still don't have to use name and table attributes if there is only one table on a page.

Something like this in the pager created hook:

if (this.$datatables && this.$datatables[this.table]) {
  this.tableInstance = this.$datatables[this.table];
  this.tableInstance.pagerInstance = this;
  return;
}

The logic would need to be smarter than that if you wanted to support multiple pagers per table, but I think that gets my idea across.

I hope that makes sense

from vuejs-datatable.

I have search on the page (back-end side). This code helps to avoid constant requests.

import axios from "axios";
import axiosCancel from "axios-cancel";

...

$getData(params, setData) {
     const requestId = "getTableData";
     const requestCancellation = {requestId: requestId};
     const data = {};

     setData([], params.page_number ? params.page_number : 1);

     axios.cancel(requestId);
     axios.post(window.retention.routing.skipStep.list, data, requestCancellation)
          .then((response) => {
               this.loaded = true;

               setData(response.data.data, response.data.recordsFiltered);
          })
          .catch((thrown) => {});
}

from vuejs-datatable.

Hi, I have the same issue. In you example in the line setData(response.data.data, response.data.recordsFiltered);
The second parameter should be an amount of all you records in DB, and shouldn't be a length of returned data from axios.

from vuejs-datatable.

Hey there,

Some updates concerning my understanding of the problem:

When the Datatable-pager & the Datatable itself are linked together, the pager defines a property on the Datatable on the created hook, thus, triggering the change detection and re-run the data function:

The problem is that, for now, we can't really know if the Datatable has to wait for a pager to run the data function or not.

A possible solution would be to have a different behavior when setting the Datatable's name property:

• If it is set, the datatable is named and won't run the data function until a pager with a table prop equal to the name is initialized.
• Otherwise, the Datatable is in no-pager mode, and pagination just doesn't have meaning: the data function is called without perPage or page values.

The drawback would be that a pair of datatable/pager could not work without explicitly setting the name & table prop explicitly. requiring:

<datatable :data="getDataFn"/>
<datatable-pager per-pager="10" page="10"/>

to become

<datatable name="my-table" :data="getDataFn"/>
<datatable-pager table="my-table" per-pager="10" page="10"/>

That's not a huge change, but backward compatibility would be compromised, and new users could easily miss that... But the new docs would help.

Feedbacks welcome

from vuejs-datatable.

Hi, thank you @pstephan1187 for your feedback,

Actually, what you describe is the current behavior. The problem is that those assignations take place after the properties watchers are initialized.

I've checked the vue docs about lifecycle hooks, and I think that I may find some workarounds by using different hooks (like beforeCreate), or using some events.

I'll try that Monday. If it works, I'll publish the 2.0.0-alpha.1.

🍻 cheers!

from vuejs-datatable.

Okay, this issue is fixed in 0e32691, and will be in next release.

from vuejs-datatable.

Closed by v2.0.0-alpha.0

from vuejs-datatable.

Ps : @pstephan1187, I misread your comment, but I came at the same conclusion by adding the pagers data on datatable

from vuejs-datatable.