How can I use multiple checkbox filter?

How can I use multiple checkbox filter?

veryacaveryaca Posts: 11Questions: 4Answers: 0
edited December 2018 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited December 2018

    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

  • veryacaveryaca Posts: 11Questions: 4Answers: 0

    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...

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • veryacaveryaca Posts: 11Questions: 4Answers: 0

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

  • veryacaveryaca Posts: 11Questions: 4Answers: 0

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

  • mihalispmihalisp Posts: 127Questions: 22Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited February 2019

    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

  • mihalispmihalisp Posts: 127Questions: 22Answers: 0

    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);
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • mihalispmihalisp Posts: 127Questions: 22Answers: 0

    Yes , thank you so much!

  • andrebertonhaandrebertonha Posts: 11Questions: 1Answers: 0
    edited April 2019

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
This discussion has been closed.