Button to clear content in Multi Filter input fields

JanNL_FR · December 2023

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
}

allan · December 2023

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_FR · 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!!

Button to clear content in Multi Filter input fields

Button to clear content in Multi Filter input fields

Answers

Howdy, Stranger!

Categories

DataTables

Button to clear content in Multi Filter input fields

Button to clear content in Multi Filter input fields

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables