Vuesax: Table server-side

Created on 17 Oct 2018  ·  10Comments  ·  Source: lusaxweb/vuesax

Are you planning to add search, filtering, and server-side pagination?

enhancement

Most helpful comment

I implemented this change, add it for the new version, greetings my pana!
................
```
total: {
type: Number,
default: 0
}

...............

getTotalPages() {
if (this.total) return Math.ceil(this.total / this.maxItems)
return Math.ceil(this.data.length / this.maxItems)
}

..............

loadData() {
let max = this.maxItems
let min = 0
.............
}
```

All 10 comments

Especially what do you mean? because it is not easier to do that part individually to make it more personalized for each api

for example, I have many log records, and return them at once so that the table page, filter and search through the tools contained therein is unfeasible

could then have an output that would report what parameters is currently in the table, so you can pass the api and already return the configured data as the user needs, turning it into a server-side datatable

good and it would not be a good methodology to run some events when a change is made in the filter or the page to run the data search on the server with those values

yes, but how to know that the user, for example, clicked the button next to the pagination, so that I request the api query?

How to make the practice better and flexible.

One suggestion is that the 'data' parameter, instead of receiving only Array or Object, is also possible to pass a String, logical, this String would be an API URL. You would pass a POST or GET request, containing the necessary parameters, something like:

{
search: 'search term',
sort: 'column selected to order',
sorted: 'search direction: ASC or DESC',
page: 'requested page',
range: 'total of items per page'
}

and you expect, in response, something like:

{
date: [], // array of items to display,
total: 0 // general total of registered items
}

this is just an example, but that would be the idea

One suggestion is that the 'data' parameter, instead of receiving only Array or Object, is also possible to pass a String, logical, this String would be an API URL. You would pass a POST or GET request, containing the necessary parameters, something like:

@jrglaber can we do this presently with the vs-table?

good and it would not be a good methodology to run some events when a change is made in the filter or the page to run the data search on the server with those values

@luisDanielRoviraContreras if we have an _event_ for each user interaction like: sort, page_change, debounced_search, then you make it possible for us to call backend API and present new data on the table, thus allowing us easily override current pagination, sort and search behaviours.

@jrglaber In the last update of the v3.x.x add the events (search, change-page and sort) here is an Example

@CharlesOkwuagwu Thank you very much for the contribution and give me the idea of ​​how to address this problem 👍

Sorry for the delay, at the end the core is free and right now working in v4.0

I implemented this change, add it for the new version, greetings my pana!
................
```
total: {
type: Number,
default: 0
}

...............

getTotalPages() {
if (this.total) return Math.ceil(this.total / this.maxItems)
return Math.ceil(this.data.length / this.maxItems)
}

..............

loadData() {
let max = this.maxItems
let min = 0
.............
}
```

Was this page helpful?
0 / 5 - 0 ratings