Individual column searching (select inputs) Allowing for MultiSelect

mcarlotta

I am using the new DataTables v.1.10.4 and adding individual select inputs for certain columns.

initComplete: function () {
            var api = this.api();
 
            api.columns( [1,2] ).indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( "#global_filters" )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? ''+val+'' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }

Is there a way I can support this select to allow for multiple selected values, invoking an "OR" style filtering for each column?

daniel_r

I guess that yeah, just need to write a code that will take into consideration the selection of multiple values from your select,

You also can use my yadcf for it, among many other feature of yadcf it has integration with Select2 and Chosen for the select inputs, see the demo
http://yadcf-showcase.appspot.com/DOM_source_chosen.html
http://yadcf-showcase.appspot.com/DOM_source_select2.html

Notice the first column filter (multi select)

mcarlotta

Hi Daniel,

Thank you for your response.

I have tried to implement your plugin and currently run into (2) issues.

The first issue is with a confliction with your plugin and the other select2 elements in my application. For some reason it disables all of them no matter their class name.

Second is with server side. I am currently using this with my Rails application and was not quite sure where to implement the server code for it to filter properly with your plugin.

daniel_r

For the conflict, a jsbin sample could help to understand the problem
For the server side, you should start with plain datatables server side implementation, and after you master it and its general filter I'm sure that the column filters will be a very easy task

for example if you are currently getting the global filter value with something like (in JAVA)

String globalSearch = req.getParameter("search");

then the particular column filtered value would be something like this (JAVA)

String sSearch_0 = req.getParameter("columns[0][search][value]");

allan

To answer your original question, in case anyone else reads this, yes you could add a size or multiple attribute to the select element to allow multiple rows to be selected. Then when reading the value get a list of the selected options and use a regular expression filter with column().search() to perform the search.

Allan

mcarlotta

Hi Allan,

Would you happen to have any examples available to achieve this task?

I added the multiple="true" to the select element but now the filtering does not function. I am assuming it is because I need to updated this piece of the code?

column
                        .search( val ? ''+val+'' : '', true, false )
                        .draw();

allan

I don't I'm afraid. But yes, you would need to modify the code that gets the val since you now have multiple options that might be selected. Likely a bit of jQuery that uses the :selected selector and $().map method would do it.

Allan

Swaraj23

I have tried with . map function but still it is selecting a single value.
values.map(function(i,j){ column .search( i ? ''+i+'' : ''+j+'').draw(); }

allan

That wasn't really what I had in mind - you would use $().map() to get an array of the selected values and then use column().search() with that array - for example table.column( 0 ).search( '^'+myArray.join('|')+'$', true, false ).

Allan