Is it possible to get all row nodes including hidden rows if using virtual scroller?

Wng

I have thousands of records to display data, and when I run the function "table.rows.nodes()", this only returns 72 rows that currently displayed. Is there any other way to access all row nodes?

colin

That function should return them all. It only wouldn't if

1. you're using serverSide, as only the visible rows are known to the client/API
2. you've added those additional rows outside of DataTables

Without seeing your code, it's hard to know which.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Wng

@colin Hi, I'm sorry for the confusion. I just tried to make a test case on live.datatables.net with 50.000 rows, and rows().nodes() did return all row nodes. I don't use serverSide, but I use deferRender, and all data is client-side processing. The thing it's hard for me to demonstrate here is because I use angularjs-datatables package, so I'm not sure if you are even familiar with it. Anyways, here is all table settings:

        vm.dtOptions = DTOptionsBuilder.fromFnPromise(function () {
            const defer = $q.defer();
            defer.resolve(vm.data);
            return defer.promise;
        })
            .withDOM("frti")
            .withScroller()
            .withBootstrap()
            .withButtons(buttons)
            .withOption("deferRender", true)
            .withOption("scrollY", "55vh")
            .withOption("scrollX", true)
            .withOption("createdRow", function (row, data, dataIndex) {
                $compile(angular.element(row).contents())($scope);
            });

kthorngren

The deferRender docs state this:

Note that when enabled, it goes without saying that not all nodes will always be available in the table, so when working with API methods such as columns().nodes() you must take this into account.

What are you trying to do with "table.rows.nodes()"?

Kevin

Wng

@kthorngren Thank you for the info. In my table, each cell represents different data based on color code (like a Rubik's cube) depending on the data. I have buttons that can modify the cell color classes, even cells are not currently displayed by scroller, so my idea is to get all row nodes, then modify cell classes from there. Do you have any suggestion in this case?

kthorngren

Use columns.createdCell or createdRow to apply attributes to the cells. Or if the data changes use rowCallback. This way you won't need to loop through all the rows first.

Kevin

Wng

@kthorngren Hi, thanks for the reply. If I use rowCallback, so everytime I want to change the cell colors after initialization, I have to call draw() function to trigger the rowCallback? Because I have a large table, so I'm afraid of redrawing the table all the time may affect the performance, or am I wrong at this point? At the moment, I just get a cell node by rowId and columnId, then adding a color class into that cell without calling any other function.

kthorngren

Yes, you will need to use draw() to have rowCallback run. It will also run when sorting, searching or apging events happen. rowCallback only iterates the rows being displayed on the page - not all rows. For example, with a page length of 10 it will run against 10 rows.

Kevin

Wng

@kthorngren by the way, my table also needs to handle checkboxes on rows and on headers each column to select cells exactly the same way with this post: https://stackoverflow.com/questions/39330486/access-to-not-loaded-nodes-of-datatable-with-deferrender-option

kthorngren

I would look at keeping the state of the checkbox as part of the row data. See this Editor example. It uses 1 or 0 for the checkbox state. It uses rowCallback to update the checkbox checked state for display.

For a select all checkbox you will need to update the data for all the rows, not the nodes. Look at rows().every() and api row().data().

Kevin

kthorngren

Just to add, you don't need Editor for the Editor example. You just need the Datatables config for the solution to work. Editor is only need to update the backend server data.

Kevin

Wng

@kthorngren Hi, Thanks for the suggestion, it's a good practice to keep checkboxes and cell selection state as you suggested. However, I have a very large data table (1000 rows & 400 columns), then every time I click the select all checkboxes, it needs to refresh the whole table then redraw that takes quite a while just to toggle the checkboxes and to highlight selected cells. That is why I keep state on cell nodes classes. Anyways, thank you once again for your support, if there isn't any other solution, I just have to disable "deferRender", and accept the slow initialization.