Select DropDown Filter with Multiple Tables

texqas

I have multiple datatables on a single page displayed via tabs menu. Everything works fine except the select dropdown filter that is not showing. I guess it has something to do with multiple tables on the same page. Any fixes?

I'm following the example here. https://datatables.net/examples/api/multi_filter_select.html

 $(document).ready(function () {
$('.tablesClass').DataTable({
    dom: 'Bfrtip',
    "pageLength": 20,
    initComplete: function () {
        this.api().columns().every(function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo($(column.footer()).empty())
                .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

            column.data().unique().sort().each(function (d, j) {
                select.append('<option value="' + d + '">' + d + '</option>')
            });
        });
    },
    buttons: [
        'copyHtml5',
        'excelHtml5'

    ]
});
});

kthorngren

Your code with two tables seems to work here:
http://live.datatables.net/bojanema/1/edit

Do you have tfoot defined in your HTML table? The code you are using won't create it if its not there. If this doesn't help then please post a link to your page or update my test case to replicate the issue.

Kevin

texqas

Thank you. I didn't have tfoot in my table and I was also using materialize css which seems to use javascript based select drop downs so I had to initialize that too. All working great now.