How to reset datatable columns' filters

Question

I created a datatable that filters on each column. Everything was fine until I updated my code trying to reset all filters. Here's my code:

            $('.dt-column-search thead tr:eq(1) th').each(function(i) {
                var title = $(this).text();
                //another condition {
                    
                } else {
                    $(this).html(
                        '<button class="btn btn-danger btn-sm" id="resetFilter">reset</button>');
                }


                $('input, select', this).on('keyup change', function() {
                    if (dt_filter.column(i).search() !== this.value) {
                        dt_filter.column(i).search(this.value).draw();
                    }
                });


            });


            var dt_filter = dt_filter_table.DataTable({
                ajax: {
                    
                },
                columns: [
                ],
                orderCellsTop: true,
                dom: '<"row"<"col-sm-12 col-md-6"l>><"table-responsive"t><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                drawCallback: function() {
                    

                    const resetFilter = document.querySelector('#resetFilter');
                    if (resetFilter) {
                        resetFilter.addEventListener('click', function() {
                            $('input[type="text"]').val('');

                            $('select').val('').trigger('change');

                            $('.flatpickr-input').each(function() {
                                if ($(this).hasClass('flatpickr-input')) {
                                    this._flatpickr.clear();
                                }
                            });
                            dt_filter.columns().search('').draw();
                            dt_filter.ajax.reload(null, false);
                        });
                    }
                }
            });

The problem is that the table is not showing data as wanted when pressing the reset button see the image.

Any help please!

Please read the pop-up text for the datatable tag (e.g. by hovering your mouse over the tag) - and then follow the tag usage guidelines mentioned there. — andrewJames
– andrewJames, Commented Mar 12 at 15:06

Emad Kerhily · Accepted Answer · 2025-03-12 07:21:15Z

0

#resetFilter is used as an id (should be unique). Instead, you can assign a class (e.g., .resetFilter).
```
$(this).html('<button class="btn btn-danger btn-sm resetFilter">reset</button>');
```

The resetFilter button's event listener is being bound inside the drawCallback, but drawCallback is invoked repeatedly, causing redundant bindings. This can be avoided by using event delegation:

$(document).on('click', '.resetFilter', function() {
    $('input[type="text"]').val('');
    $('select').val('').trigger('change');

    $('.flatpickr-input').each(function() {
        if ($(this).hasClass('flatpickr-input')) {
            this._flatpickr.clear();
        }
    });

    dt_filter.columns().search('').draw();
    dt_filter.ajax.reload(null, false);
});

answered Mar 12 at 7:21

Emad Kerhily

7421 gold badge5 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cussaxx Mar 14 at 3:02

i've tried this before but result is still same

Collectives™ on Stack Overflow

How to reset datatable columns' filters

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related