Webix lags when receiving large pagination

Webix JS
#1

Hello
In my case I only have 10 rows to fetch on “datatable” but my pagination is about 300k divided by (10 records per page)

Untitled
Untitled942×767 20.6 KB

As you can see in my picture. The record takes 12 seconds to get data from the server but it takes about 18 seconds to display the data on the “datatable”.

My datatable:

            view: "datatable",
            id: "app:grid",
            select: "row",
            multiselect: false,
            resizeColumn: true,
            pager: "app:pager",

Here is my pager:

{ view: "pager", width: 340, id: "app:pager", size: size, template: `{common.first()}{common.prev()} {common.pages()}{common.next()}{common.last()}` }

My data:
Untitled2

How to increase speed?

datatable loading slowdown in pagination
#2

Hello. Can somebody help me ? How to decrease time load data to pager ?

More info. It happen when you use collection, custom column data by template,…

It will cause slow parse data to datatable .

[SLOW]

  1. data: […10 items…]
  2. pos: “0”
  3. total_count: 30000

[FAST]

  1. data: […10 items…]
  2. pos: “0”
  3. total_count: 10

Time is proportional to ‘total_count’

[UPDATED]
, adjust: true
Because of use , adjust: true . It so slow but i only have 10 rows data fetched.

Any idea ?

#3

Hello,
As you correctly noted, the reason for the lower performance is in adjust: true.
I will duplicate here the answer that I have left in the documentation on a similar question.

“adjustColumn” or just “adjust” uses the entire dataset to calculate the column’s width by default and therefore it can impact the time of performance.
At the moment, one of the following solutions may suit you:

  1. Using adjustBatch attribute of columns. It limits the number of rows that will be used in the calculation of the maximum column width. So, you can define adjustBatch: 50 and the size will be calculated based only on these 50 items, not all the rows, which can make the process faster. However, notice that in this case the sizes will take into account only the first 50 records of the entire table.
    Example: Code Snippet
  2. You can adjusts the columns to the width of their headers, not the all data items. Doing so the column will be adjusted only to its header instead of going through all datatable items to calculate the width and it is, naturally, faster.
    Example: Code Snippet
#4

Also, as for total_count, the speed of loading is not related to this parameter. A request is sent to the server only for the number of records specified in the datafetch (50 records by default). Total_count is returned in the server response and is needed to correctly calculate the component height or the number of pages in the pager. At the same time, the whole data is not rendered. Only visible records in the table are rendered (lazy rendering), which does not affect the datatable rendering.
As an example, there is a datatable with total_count: 2,000,000
https://snippet.webix.com/1vru38lw

#5

hello.
The problem is when u have many row with paging.

It auto spread many page. Also resize column of datatable.
=> SLOW

I have write a custom pager to resolve this issue.
image

as u see i remove empty page cause by paging.