Multiple column filtering in a single dropdown in DataTables

Question

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:

So, what I want to do is the following:

provide ONE single dropdown with several filter options
every option provides a custom filter (e.g. 'option1' shows all records that are available, 'option2' shows all records that are available and have label F, 'option3' shows all records that are available and have label E, …)
apply the filter immediately 'live'

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.

Should be possible but please show us what you've tried already... perhaps in a simple JSFiddle? — annoyingmouse
– annoyingmouse, Commented Sep 5, 2016 at 11:54
I haven't found any solution for myself so far. Here's a little JSFiddle. I only achieved to search through the searchbar, no real filtering. And I know that I can search specific columns. But I don't know how to search multiple columns. — yaksey
– yaksey, Commented Sep 5, 2016 at 12:55

annoyingmouse · Accepted Answer · 2016-09-05 13:40:35Z

2

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.

answered Sep 5, 2016 at 13:40

annoyingmouse

5,6991 gold badge31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

yaksey Over a year ago

Thank you so much @annoyingmouse, works like a charme - exactly what I was looking for.

yaksey Over a year ago

I got an additive question @annoyingmouse. Is it also possible to filter for hidden columns, like calling the column by name or somethink like that?

yaksey Over a year ago

That's very cool, thank you. So it's like I have a list of all my columns (like my database), independent from my shown table - and the indexes alway remain the same, no matter which columns are hidden or shown? @annoyingmouse

annoyingmouse Over a year ago

That's sort of right. It depends if they're in your data. I guess it'll depend upon how the data is generated and placed within the Table or DOM.

yaksey Over a year ago

One month later and another question rised. How could I search for empty columns? A simple <option data-8="">Some text</option> doesn't seem to work. @annoyingmouse

Collectives™ on Stack Overflow

Multiple column filtering in a single dropdown in DataTables

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related