How can I use multiple checkbox filter?

veryaca

Right now, this filter is working when my single checkbox is checked:

$('#sportsNBA').on('change', function() {
    if( $(this).is(':checked') ) {
        table.columns(1).search('nba');
    }
    table.draw();
});

However, if I create another one, like so:

$('#sportsNFL').on('change', function() {
    if( $(this).is(':checked') ) {
        table.columns(1).search('nfl');
    }
    table.draw();
});

It only takes the second one in consideration.

What I'm basically looking for, is have many checkboxes with filters and allow the user to check as many as he wants and have it filter from the initial data in the table.

UPDATE: I've seen how to make it work with previous versions, but not the current one: http://plnkr.co/edit/b8cLVaVlbNKOQhDwI2mw

kthorngren

Thats an interesting example. You need to look at the script.js to see how the search is being executed. The Conversion Guide from 1.9 to 1.10 will help you map to the current naming convention.

fnFilter maps to search() and the search type is regex. The script is actually using column().search(). Using column().search() you can setup a similar function to perform a regex search using the checked items.

Kevin

veryaca

But I've tried many things and can't get it to work.
Some filters will be conducted on column 1, some others on column 2, etc...

kthorngren

There are two problems with your code snippets:

1. You aren't using regex searching
2. The searches are executed individually, meaning clicking nba will only search for nba then when clicking nfl the search will only be for nfl.

I took the code from the working example you posted and updated it for Datatables 1.10 naming convention:
http://live.datatables.net/gesirida/1/edit

HTH,
Kevin

veryaca

Thank you so much for you time Kevin. I'll have a look

veryaca

It's working very well. Thanks for your time. I really appreciate it

mihalisp

Great post!
But what if i want the following:
If i check single checkbox to filter the Datatable with values not (nba and nfl).
e.g. show everything except nba and nfl.

in this case,is this necessary??

            var offices = $('input:checkbox[name="ofc"]:checked').map(function() {
             return this.value;
            }).get().join('|');

thank you in advance.

kthorngren

You still need to use regex searches and use | to separate the words to remove from the display. You will need a not type search. Something line this: ^((?!nba|nfl).*)$. I updated the above example to show this with the Position column. The Office column still filters the table showing what is checked.
http://live.datatables.net/kopafape/1/edit

Note: The search looks like this search(positions ? '^((?!' + positions + ').*)$' : '', true, false, false). This is to use '' if positions is blank. Otherwise with no checkboxes checked the table will be blank.

Kevin

mihalisp

Thank you for the quick reply!

I think i need something easier than that.

I just want the first checkbox (eg. chk1) to remove 'Director' and 'Integration Specialist' (only these 2)
and the second checkbox (eg. chk2) to remove 'New York' and 'San Francisco' (only these 2).

In this case,do i need the following code??

             var positions = $('input:checkbox[name="pos"]:checked').map(function() {
             return this.value;
             }).get().join('|');

             table.column(1).search(positions ? '^((?!' + positions + ').*)$' : '', true, false,                         false).draw(false);

kthorngren

Like I said you will need a regex search. This regex seems to work ^((?!nba|nfl).*)$. The | is an or operator for regex. If you want to search for or remove 'Director' or 'Integration Specialist' you will need to use an or search and use | between search terms. Is this answering your question?

Kevin

mihalisp

Yes , thank you so much!

andrebertonha

kthorngren considering your answer I follow the example here but in the second checkbox it doesnt filter

 $('input:checkbox').on('change', function () {
   //build a regex filter string with an or(|) condition
    var site = $('input:checkbox[name="site"]:checked').map(function() {
        return this.value === 'on' ? 'S' : 'N';
    }).get().join('|');        

    //filter in column 5, with an regex, no smart filtering, not case sensitive        
    table.column(5).search(site, true, false, false).draw(false);
    
    var boca = $('input:checkbox[name="boca"]:checked').map(function() {
        return this.value === 'on' ? 'S' : 'N';
    }).get().join('|');   
    
    console.log(boca);

    table.column(6).search(boca, true, false, false).draw(false);    
     

  });

someone could help? note that i have 4 checkboxes, which one has the S or N value inside

kthorngren

I answered your same question in this thread:
https://datatables.net/forums/discussion/55956/filtering-datatable-with-checkboxes-column-value-s-appear-value-n-dont#latest

Kevin