Button to clear content in Multi Filter input fields

Button to clear content in Multi Filter input fields

JanNL_FRJanNL_FR Posts: 47Questions: 15Answers: 2

Description of problem:
I have a working button to clear the input fields.
The filters are reset but the input fields are not made blank.
Does anyone know a solution?

{
     text: 'Clear All Filters',
     action: function () {
           portfolioTable.search('').columns().search('').draw();
     },
     enabled: true
}

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,627Questions: 1Answers: 10,090 Site admin
    Answer ✓

    These are column filters? DataTables knows nothing about your input elements. Normally you will bind an event listener to them to update the filter as the search changes.

    If you want to change the input, you need to do that as well. Perhaps a trivial:

    $(''#myTable thead input').val('');
    

    will do? It is impossible to say what the exactly and correct answer should be without a test case though.

    Allan

  • JanNL_FRJanNL_FR Posts: 47Questions: 15Answers: 2
    edited December 2023

    Many thanks Allan,
    I have never studied JavaScript (63 years young), but the simple examples from DataTables.net make it easy to quickly create an example.

    I have an example at https://campcare.eu/1/Details/

    <title>DataTables with Multi Filters</title>
    
        <style>
            table.dataTable th {
                background-color: #14A1AE;
                color: white;
                border: 1px solid;
            }
    
            table.dataTable tbody tr:nth-child(even) {
                background-color: #F2F2F2;
                color: #1F2227;
                border: 1px solid;
            }
    
            table.dataTable tbody tr:nth-child(odd) {
                background-color: #DDDDDD;
                color: #1F2227;
                border: 1px solid;
            }
    
            td.details-control {
                background: url('../images/details_open.png') no-repeat center center;
                cursor: pointer;
            }
    
            tr.shown td.details-control {
                background: url('../images/details_close.png') no-repeat center center;
            }
    
            /* Hide disabled selects */
            .dataTable tfoot select[disabled] {
                display: none;
            }
    
            /* Adjust width of disabled select */
            .dataTable tfoot select[disabled] + .select2-container {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="button-container">
                <button id="btn-show-all-children" type="button">Expand All</button>
                <button id="btn-hide-all-children" type="button">Collapse All</button>
                <button id="copy" type="button">Copy</button>
                <button id="csv" type="button">CSV</button>
                <button id="excel" type="button">Excel</button>
                <button id="pdf" type="button">PDF</button>
                <button id="print" type="button">Print</button>
                <button id="clearfilters" type="button">Clear Filters</button>
            </div>
    
            <div class="clearfix"></div>
    
            <hr>
    
            <div class="dataTableContainer">
                <table id="details" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>FirstName</th>
                            <th>LastName</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>StartDate</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th>FirstName</th>
                            <th>LastName</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>StartDate</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
    
    <script>
        /* Formatting function for row details - modify as you need */
        function format(d) {
            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                '<tr>' +
                    '<td>Salary:</td>' +
                    '<td>' + d.salary + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>Extn.:</td>' +
                    '<td>' + d.extn + '</td>' +
                '</tr>' +
            '</table>';
        }
    
        $(document).ready(function () {
            var editor = new DataTable.Editor({
                ajax: 'server_processing.php',
                fields: [
                    { label: 'FirstName:', name: 'first_name' },
                    { label: 'LastName:', name: 'last_name' },
                    { label: 'Position:', name: 'position' },
                    { label: 'Office:', name: 'office' },
                    { label: 'Age:', name: 'age' },
                    { label: 'StartDate:', name: 'start_date' }
                ],
                table: '#details'
            });
    
            var table = $('#details').DataTable({
                ajax: 'server_processing.php',
                dom: 'Bfrtip',
                
                paging: false,
                scrollCollapse: true,
                scrollY: '450px',
                searching: true,
                columns: [
                    {
                        className: 'details-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                    },
                    { data: 'first_name' },
                    { data: 'last_name' },
                    { data: 'position' },
                    { data: 'office' },
                    { data: 'age' },
                    { data: 'start_date' }
                ],
                order: [[1, 'asc']],
               
                initComplete: function () {
                    // Open all child rows on load
                    this.api().rows().every(function () {
                        // If row has details collapsed
                        if (!this.child.isShown()) {
                            // Open this row
                            this.child(format(this.data())).show();
                            $(this.node()).addClass('shown');
                        }
                    });
    
                    // Multi Column filter
                    this.api().columns([1, 2, 3]).every(function (index) {
                        var column = this;
                        var select = $('<select class="filter-select" style="width:100%;"><option value=""></option></select>')
                            .appendTo($(column.footer()).empty())
                            .on('change', function () {
                                var val = DataTable.util.escapeRegex($(this).val());
                                column.search(val).draw();
                            });
    
                        column
                            .data()
                            .unique()
                            .sort()
                            .each(function (d, j) {
                                select.append(
                                    '<option class="filter-option" value="' + d + '" style="word-wrap: break-word;">' + d + '</option>'
                                );
                            });
                    });
                }
            });
    
            // Add event listener for opening and closing details
            $('#details tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
    
                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
    
            $('.global-search').on('keyup', function () {
                table.search(this.value).draw();
            });
    
            // Handle click on "Expand All" button
            $('#btn-show-all-children').on('click', function () {
                // Enumerate all rows
                table.rows().every(function () {
                    // If row has details collapsed
                    if (!this.child.isShown()) {
                        // Open this row
                        this.child(format(this.data())).show();
                        $(this.node()).addClass('shown');
                    }
                });
            });
    
            // Handle click on "Collapse All" button
            $('#btn-hide-all-children').on('click', function () {
                // Enumerate all rows
                table.rows().every(function () {
                    // If row has details expanded
                    if (this.child.isShown()) {
                        // Collapse row details
                        this.child.hide();
                        $(this.node()).removeClass('shown');
                    }
                });
            });
            
            // Handle click on "Clear Filters" button
            $('#clearfilters').on('click', function () {
                // Clear the global search input
                $('.global-search').val('').keyup();
    
                // Clear individual column filters
                table.columns().every(function () {
                    this.search('').draw();
                });
    
                // Reset dropdown filters to default (empty) value
                $('.filter-select').val('').change();
            });
    
                
            $('#copy').on('click', function () {
                table.button(0).trigger();
            });
    
            $('#csv').on('click', function () {
                table.button(1).trigger();
            });
    
            $('#excel').on('click', function () {
                table.button(2).trigger();
            });
    
            $('#pdf').on('click', function () {
                table.button(3).trigger();
            });
    
            $('#print').on('click', function () {
                table.button(4).trigger();
            });
        });
    </script>
    
        </div>
    </body>
    </html>
    

    Thanks for the whole team of DataTables, CloudTables and Editor.
    Keep up the good work!!

Sign In or Register to comment.