Search panes gone after filtered and new draw()

Search panes gone after filtered and new draw()

Pete44Pete44 Posts: 17Questions: 5Answers: 0
edited July 2020 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 13,779Questions: 25Answers: 3,242

    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

  • colincolin Posts: 12,604Questions: 0Answers: 2,154

    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

  • Pete44Pete44 Posts: 17Questions: 5Answers: 0

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

  • sandysandy Posts: 686Questions: 0Answers: 188
    Answer ✓

    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

  • Pete44Pete44 Posts: 17Questions: 5Answers: 0

    Hi @sandy ,

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

  • xepoxepo Posts: 6Questions: 2Answers: 0

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

Sign In or Register to comment.