[SalesForce] Filter by multiple conditions / drop-downs using DataTables – Table plug-in for jQuery

Using this example from http://www.verticalcoder.com/2014/11/21/datatables-in-visualforce-part-1/ I implemented a Visualforce page that creates a dropdown and filters records in the datatable based on the dropdown value. How would I go about filtering by multiple dropdowns using an "AND" condition. Is that even possible using datatables in jQuery? Everything I've tried so far (Two dropdowns and two-sided multi select lists) have not worked, so any help would be greatly appreciated. Cheers. 

<script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var contactTable = j$('[id$="contacttable"]').DataTable({
                    order: [[2, 'asc']],

                    initComplete: function() {
                        var api = this.api();
                        var select = j$('[id$=accountSelect]');
                        api.column(0).data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );   
                    }
                });

                j$('[id$=accountSelect]').change(function() {
                    var val = j$.fn.dataTable.util.escapeRegex(
                        j$(this).val()
                    );
                    contactTable.column(0)
                        .search( val == 'All' ? '' : '^'+val+'$', true, false )
                        .draw();
                });
            });
        </script>

Best Answer

Yes just create two dropdown.

once you int your datatable

just add the script 

var table = table =  $('#tableId').DataTable( {});

$('#firstDropdownId').on('change', function () {
        table.columns(6).search( this.value).draw();
} );

$('#SecondDropdownId').on('change', function () {
       table.columns(7).search( this.value).draw();
} );

Here 6, 7 are the column no. of your table Using this you can filter the data.

check out this http://jsfiddle.net/Ratan_Paul/5Lj6peof/1/

Related Topic