Adding muti-table support to the column filtering example

Jonne

Hi Guys,

Would someone be able to tell me how I can makes the below sample support multiple tables per page?

I tried but my jQuery skills leave a bit to be desired.

https://datatables.net/examples/api/multi_filter_select.html

Many thanks

daniel_r

Try replacing

$("#example tfoot th")

with

$(".filterableTable tfoot th")

and make sure every table element in your page have

class="filterableTable"

Jonne

Thanks for your reply. I did try your suggestion but unfortunately the dropdown boxes also contain values from all of the other tables in the page. I think the problem has something to do with the table variable referring to all of the tables rather than just the one being rendered.

This is my code. Do you have any further ideas?

$(document).ready(function () {
    var table = $('.filterableTable').DataTable();

    $(".filterableTable thead th").each(function (i) {
        if ($(this).hasClass('filter')) {
            console.log(i);
            var select = $('<select><option value="">All</option></select>')
                .appendTo($(this))
                .on('change', function () {
                    var val = $(this).val();

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

            table.column(i).data().unique().sort().each(function (d, j) {
                select.append('<option value="' + d + '">' + d + '</option>')
            });
        }
    });
});

Edit Fixed it:

$(document).ready(function () {
    $.each($('.filterableTable'), function () {
        $(this).find('thead th').each(function (i) {
            if ($(this).hasClass('filter')) {
                var currentTable = $(this).closest('.filterableTable').DataTable();
                var select = $('<select><option value="">All</option></select>')
                    .appendTo($(this))
                    .on('change', function () {
                        var val = $(this).val();

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

                currentTable.column(i).data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            }
        });
    })
});