javascript - How to reset datatable columns' filters - Stack Overflow

admin管理员组

文章数量:1391805

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!

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!

• javascript
• jquery
• datatable

Share Improve this question Follow edited Mar 14 at 9:52 pmaruszczyk 2,16522 gold badges2424 silver badges5050 bronze badges asked Mar 12 at 6:33 cussaxxcussaxx 1111 silver badge11 bronze badge 1

• 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 Commented Mar 12 at 15:06

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

1. #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>');
   

2. 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);
   });
   
   

本文标签： javascriptHow to reset datatable columns39 filtersStack Overflow