Search panes gone after filtered and new draw()

Pete44

I'm using the Buttons and SearchPanes extensions. I build a custom button who is filtering all rows with a value of 0. This works fine, but after this.draw(); my searchpanes are empty (No matching records found). I also tried with this.searchPanes.rebuildPanes(); after the draw, but nothing happens. Is there something I'm doing wrong or I'm missing?

My custom button is as follows:

className: 'showEmptyButton',
                    text: 'Hide empty',
                    action: function () {
                        if (this.text() === 'Show empty') {
                            $.fn.dataTable.ext.search.pop();
                            this.text('Hide empty');
                        } else {
                            $.fn.dataTable.ext.search.push(
                                function(settings, data, dataIndex) {
                                    return parseInt(data[5]) > 0;
                                }
                            );
                            this.text('Show empty');
                        }
                        this.draw();
                    }

Thanks in advance. Let me know if you need further information.

kthorngren

Built a test case for you.
http://live.datatables.net/xutakage/1/edit

It doesn't seem to be behaving correctly. Will let the developers take a further look.

Kevin

colin

Thanks for that test case, Kevin. Agreed, something looks wobbly there. I've raised it internally (DD-1604 for my reference) and we'll report back here when there's an update.

Cheers,

Colin

Pete44

Thanks a lot guys for the fast reply. Sorry that I didn't create a test case. I thought I did something wrong.

sandy

Hi @Pete44 ,

The key to this lies in your buttons functionality. Where you are adding your custom search function you are actually adding to every DataTable on the page. This in combination with the listeners that SearchPanes adds for the preDraw on the parent table causes the search function to run on the pane as well.

To fix this you need to add a check to your search function to ensure that you are only running it on the desired table. Take a look at the below

// Within the buttons action function the context is the parent table
var tableNode = this.table(0).node();
$.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        // Check that the search is running on the intended table
        if (settings.nTable !== tableNode) {
            return true;
        }
        
        return parseInt(data[0]) > 0;
    }
);

I've updated the example to show this working for you.

Hope this helps,
Sandy

Pete44

Hi @sandy ,

awesome! Works like a charm. Thanks a lot for your help.
Thanks all of you guys for this awesome project!

xepo

mixing range filtering and search panes also causes the issue, and is fixed by the solution, thanks!