CODEWITHSUNDEEP
javascriptjquerydatatabledatatables
yaksey
yaksey

Reputation: 67

Multiple column filtering in a single dropdown in DataTables

I'm working with DataTables, the plug-in for the jQuery Javascript library. There are already possibilities to search and filter but I haven't found, what I'm looking for.

I already searched the web but I haven't found a solution to my question yet. Maybe I searched for the wrong terms, so I'm sorry if the solution to my problem might be very simple.

Example-table: Example-Table

So, what I want to do is the following:

Summary: I want to create a dropdown that provides options which do a multiple column filtering/search.

So, how can I achieve this? Is this even possible in DataTables?

Thanks in advance.

Upvotes: 0

Views: 2308

Answers (1)

annoyingmouse
annoyingmouse

Reputation: 5699

This JS:

$(document).ready(function() {
    var table = $('#example').DataTable();
    $('select[name="filter"]').change(function() {
        if (!$(this).val()) {
            table.columns().search("").draw();
        } else {
            table.columns().search("");
            var option = $(this).find(":selected");
            var columns = Object.keys(option.data());
            console.log(columns)
            $.each(columns, function(k, v){
                table.columns(parseInt(v, 10)).search(option.data(v));
            });
            table.draw();
        }
    });
});

With this HTML:

<select name="filter">
    <option value="">No filter</option>
    <option data-1="Accountant">Filter Accountant</option>
    <option data-2="Tokyo">Filter Tokyo</option>
    <option data-1="Accountant" data-2="Tokyo">Filter Accountant in Tokyo</option>
</select>

Should do what you need. We iterate over the data attributes of the selected option and search the relevant column. Working JSFiddle here.

Hope that helps.

Upvotes: 2

Related Questions