Datatable pagination and filtern when we have more then 50.000 entries

Webix JS
1

Hello webix friends.

I have a database with more then 50,000 entries. I can’t load all of them. That makes the browser crash. Let’s say I load the first 100 entries. How can I configure a data table so that it scrolls and loads dynamically during pagination, and how can I dynamically filter when searching for specific criteria? Please help…

Thank you
Michael

2

Hello Michael,

For datatable dynamic loading is implemented by default but it works only if the functionality is supported by the server.

While scrolling or navigating with pagination, your datatable will automatically issue a request which should include such parameters as continue, count and start. So your server script should be able to handle these parameters.
Also note that your server response should have the exact structure to make it work.

Please check th example with the dynamic loading: Code Snippet

As for filtering data using dynamic loading you need to use server filtering. Server-side filtering and sorting are essentially data reloading with additional parameters
E.g. the patterns for dynamic loading should be preserved, and the filtering value is always added to the request. But in this case your server also should be able to handle filtering and these parameters.

Please check the example with dynamic loading and server-side filtering: Code Snippet

3

Thank you Natalia.

I appreciate that. But I forget to say that all Tables are with paginators.
And it looks quite difficult for me to handle the preloaded rows and the amount of rows which should be loaded cause I have always different rows per page…
Sometime the datatable doesn’t stop loading when the correct count of rows are not fit into the view…

Do you have an example on datatables with pagination??

Thank you so much.

Michael

4

Hello Natalia.

Please have a look for dynamic datatable load, when I go to another page:

When I switch to the next page on a pagination datatable, The webix does not stop loading and loading… And does not load all content in the list…

I need your hints and very help…

5

Hello Michael,

To use datatable with pagination please use pager property where you can define the container for the pager. And also use pager component where you need to define the id of the pager(id:"pagerB") which should be equal to the datatable’s pager(pager:"pagerB").

Please take a look at the example: Code Snippet

6

Hello Natalia.

Yes I use this pager like you show it to me, but I do not get request params for limit and start parameter…

I response with the array of
[
‘data’=>[…],
‘pos’=>18,
‘total_count’=>18
]

what did I missunderstand?? is there something else I have to look for on server side?

Oh please be kind and give a helping hand…
Michael

8

I HAVE FOUND THE MISTAKE!!

the problem is,that I have an order in my query… That means I have an order over all and then limit it but this can’t be work, because I’ll will get always a different result.

Do I have setup a filter after I load my result into the datatable?

This is also a problem when I change the order in the datatable. But How to manage this???

sorry for this but I couldn’t stop working on this problem…

Please help me.

Michael

9

Hello Michael,

You can try another approach of dynamic loading using standalong pager to load data from the server each time you navigate pages and load every time new data with the necessary parameters depending on the required page.
Also you need to delete existing content before downloading the next data package:

   on:{
        // clear self before data loading
        "data->onParse":function(driver, data){                    
          this.clearAll(true);
        }         
      }

Please check the example: Code Snippet

10

Thank you Natalia. :rose: