Initial Sort

[pbgcosta]

Hi,

Is there any way to set the initial sort of the table column(s) ?

Doing it with:

window.onload = function () {
const table = document.getElementById(‘table’);
table.sortBy(‘same_column”, ‘desc’);

}

and having a DataAdapter as datasource and using virtualDataSource to grab remote data (passing parameters from details and sorting and filtering on the server) … the grid loads the data 2 times on the beginning … one initially and another when table.sortBy is called.

Thanks in Advance

Pedro Costa

 

 

[pbgcosta]

Defining de datasource like this … I always get two requests to the server .. if I call resultCallbackFunction with virtualDataSourceLength = the total length of the data
NOTE: backticks inside fetch are shown as . could not find a way of escaping them

        dataSource: new window.Smart.DataAdapter({

          virtualDataSourceCache: true,

          virtualDataSource: async function (resultCallbackFunction, details) {
            console.log(details);

            if (!tableReady) {
              return;
            }

            let sort = [];
            if (details.sorting.length > 0) {
              for (const s in details.sorting) {
                sort.push({
                  sortBy: s,
                  sortOrder: details.sorting[s].sortOrder
                });
              }
            }

            let filter = [];
            if (details.filtering.length > 0) {
              for (const f in details.filtering) {
                filter.push({
                  filterBy: f,
                  filterType: details.filtering[f].filters[0].type,
                  filterCondition: details.filtering[f].filters[0].condition,
                  filterValue: details.filtering[f].filters[0].value
                });
              }
            }

            const res = await fetch(encodeURI(<code>/table_data?first=${details.first}&last=${details.last}&sorting=${JSON.stringify(sort)}&filter=${JSON.stringify(filter)}</code>));
            const data = await res.json();
            resultCallbackFunction({
              dataSource: data.payload,
              virtualDataSourceLength: data.count
            });
          }

• This reply was modified 1 year, 11 months ago by pbgcosta.
• This reply was modified 1 year, 11 months ago by pbgcosta.
• This reply was modified 1 year, 11 months ago by pbgcosta.
• This reply was modified 1 year, 11 months ago by pbgcosta.
• This reply was modified 1 year, 11 months ago by pbgcosta.
• This reply was modified 1 year, 11 months ago by pbgcosta.
• This reply was modified 1 year, 11 months ago by pbgcosta.
• This reply was modified 1 year, 11 months ago by pbgcosta.

[pbgcosta]

This happens exactly the same in this demo example on the site:

https://www.htmlelements.com/demos/table/server-side-paging-sorting-filtering-mysql-php/

2 initial requests. It seems like a bug …

[svetoslav_borislavov]

Hi,

Could you, please try setting the dataSource after sorting the table?

const table = document.getElementById(‘table’);
table.sortBy(‘Country’, ‘asc’);
table.dataSource = ……

Hope this helps and we are waiting for your feedback!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[pbgcosta]

Hi Svetoslav

Thank you for your answer.

I tried but had the same result. Like I wrote above even If i don’t sort the table ..if I call resultCallbackFunction with virtualDataSourceLength = the total length of the data I get two requests (and sometimes three!!). It even happens on one of the site examples. Just check

https://www.htmlelements.com/demos/table/server-side-paging-sorting-filtering-mysql-php/

with the dev tools and you will see two initial requests.

If I set virtualDataSourceLength to a big value in the table properties and then return that value in resultCallbackFunction there’s only one request .. but that makes the info on paging wrong!

Thanks and regards

Pedro Costa

[Markov]

Hi Pedro,

Yes, you will have 2 requests. The sortBy method will make a server call. There is not a way to have initial sort without calling a sortBy method in the Table component. Initial sort is supported in the Grid component, but not in the Table component.

Regards,
Boyko

Smart UI Team
https://www.htmlelements.com/

[pbgcosta]

Hi Boyko,

Thank you for your answer.

Please read what I wrote in the reply before: https://www.htmlelements.com/forums/topic/initial-sort/#post-104065

I’m having 2 initial requests even if I don’t sort the table and that happens on an example on your site also! That happens when I return a value in virtualDataSourceLength (and happens the same way in the exmple).

Thanks and regards,

Pedro Costa

[Markov]

Hi Perdo,

Depending on the detail.action param of the virtualDataSource function, the user may choose whether or not to make a server call. In the case of our demo, the function is called twice and it is our mistake in the demo that we make two server calls. The first call is made when “detail.action” is “dataBind” and the second one is made when it is undefined. We need to add If-conditions, before the “new window.Smart.Ajax({” function call.

Regards,
Boyko

Smart UI Team
https://www.htmlelements.com/

[pbgcosta]

Boyko,

I tried that … several combinations etc … like only returning or doing:

            if (typeof details.action == "undefined") {
              resultCallbackFunction({
                dataSource: [],
                virtualDataSourceLength: 0
              });
              return;
            }

but never works .. the table don’t load the data and presents a loader forever.

I will have to wait to see how you will change your example because it seems I can’t do it.

Thanks for your help.

Pedro Costa

• This reply was modified 1 year, 11 months ago by pbgcosta.

[admin]

Hi Pedro,

I think that the idea here is that when details.action is undefined, just use return;

[Author]

Posts