what is the best way to make a custom checkbox filter?

weinan

I want to create a checkbox filter for my story column. I am currently using the SearchPane but I realized this is not exactly what I want.  I would like to have a checkbox filter that contains the following values and those values may not yet exist in the current dataset. 

Agriculture
Childbirth
Dance
Divorce
Khmer Rouge
Khmer Rouge Aftermath
LDS Conversion Stories
Reunification
Songs
Village Life

At the same time, each row may have multiple values from above( as you can see from the first two rows from my live site).  Here is my live site example: http://humstaging.byu.edu/cambodianoralhistories/
what is the best way to achieve this?

here is my current code

                           jQuery(document).ready(function() {
            var table = jQuery('#myTable').DataTable(
                {
                    searchPane:{
                        columns:[':contains("Gender")',':contains("Birth Province")',':contains("story")',]
                        , threshold: 0
                    }
                }


            );
            jQuery.fn.dataTable.ext.search.push(
                        function( settings, data, dataIndex ) {
                            var min = parseInt( $('#min').val(), 10 );
                            var max = parseInt( $('#max').val(), 10 );
                            var age = parseInt( data[6] ) || 0; // use data for the age column


                            if ( ( isNaN( min ) && isNaN( max ) ) ||
                                ( isNaN( min ) && age <= max ) ||
                                ( min <= age   && isNaN( max ) ) ||
                                ( min <= age   && age <= max ) )
                            {
                                return true;

                            }
                            return false;

                        }
                    );

            // Event listener to the two range filtering inputs to redraw on input
            jQuery('#min, #max').keyup( function() {
                console.log(table);
                table.draw();

            } );


        } );

kthorngren

Here is an example of checkbox filtering using the search plugin feature.
http://live.datatables.net/rosahuka/1/edit

Kevin

weinan

Thank you Kevin, that's really helpful!

However, it only works when the checkbox's value exactly matches the result value.
For example, if one person has multiple stories, clicking one single checkbox which contains one of the person's stories won't return that person. I want to return the result if that person has the checkbox's value despite any other stories he has and those stories are not even selected.

Do you understand what I am trying to say?
Again, thanks for your help.

kthorngren

You can change the comparisons to match what you want. My example uses if (positions.indexOf(searchData[1]) !== -1) to see if the column data is in the array of checked items. This can be changed to anything you want.

Looks like you have data like this Khmer Rouge, Songs, and Village Life. I would probably look at taking that string and converting it to an array using something like var stories = searchData[1].split(',');. Then use a Javascript method to see if any of the checked items (positions array for example) are in the stories array. You can probably find techniques to do this on Stack Overflow.

If you still need help please update my example with your data samples and the code you tried.

Kevin

maztak

Hi, it's a very useful library and plugis.
I use Kevin's sample, and wrote code for multiple values.
If each people have multiple positions, here is a example.

        $.fn.dataTable.ext.search.push(
            function( settings, searchData, index, rowData, counter ) {
                var positions = $('input:checkbox[name="pos"]:checked').map(function() {
                    return this.value;
                }).get();
                        
                for( let i = 0; i < positions.length; i++ ){
                    const pos = positions[i];           
                    if (searchData[1].indexOf(pos) === -1) {
                        return false;
                    }
                }
                
                return true;
            }
        );

Note:
- split(',') is not needed in my case. forEach method didn't work for me.
- I return true as default because multiple checkbox means AND filter conditions in normal case.