Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #104053
    pbgcosta
    Participant

    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

     

     

    #104054
    pbgcosta
    Participant

    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, 7 months ago by pbgcosta.
    • This reply was modified 1 year, 7 months ago by pbgcosta.
    • This reply was modified 1 year, 7 months ago by pbgcosta.
    • This reply was modified 1 year, 7 months ago by pbgcosta.
    • This reply was modified 1 year, 7 months ago by pbgcosta.
    • This reply was modified 1 year, 7 months ago by pbgcosta.
    • This reply was modified 1 year, 7 months ago by pbgcosta.
    • This reply was modified 1 year, 7 months ago by pbgcosta.
    #104063
    pbgcosta
    Participant

    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 …

    #104064

    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/

    #104065
    pbgcosta
    Participant

    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

    #104066
    Markov
    Keymaster

    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/

    #104067
    pbgcosta
    Participant

    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

    #104068
    Markov
    Keymaster

    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/

    #104069
    pbgcosta
    Participant

    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, 7 months ago by pbgcosta.
    #104080
    admin
    Keymaster

    Hi Pedro,

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.