The draw event in combination with cascadePanes: true

sgustafsson

Link to test case: https://live.datatables.net/jologuxi/1/edit?js,console,output
Description of problem:

I am trying to achieve the following: After the user has filtered the table data via one or more selections in my SearchPanes, I want to analyze the filtered table data and calculate a few percentage values from the filtered data. I tried using the draw event for this, but unlike in the documentation and examples, in my case the draw event is fired multiple times, and not just once.
While creating the test case, I figured out why:

searchPanes: { cascadePanes: true}

is to blame. When set to false , the draw even is fired only once.
I want to avoid kicking off the percentage value calculation multiple times, so is there a way out for me ;-) with cascadePanes: true

sgustafsson

I found a dirty workaround by remembering the number of rows, and only doing my "heavy lifting" percentage calculation in case the number of rows has changed:

https://live.datatables.net/jologuxi/2/edit

table.on('draw', function () {
                console.log("DRAW event fired...");      
                let rows = table.rows({ search: 'applied' }).data().length;  
                if(lastTimeIChecked != rows) {
                    console.log("Doing the heavy lifting");
                    lastTimeIChecked = rows;                    
                } else {
                    console.log("Not doing the heavy lifting");
                }
            });

colin

Yep, each pane is a DataTable, so when the option cascasePanes is true, it'll redraw each pane for the cascade, triggering those additional events. Your workaround seems like a good way to go!

Colin

sgustafsson

Thanks Colin for confirming!