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.

            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(
                        .search( val == 'All' ? '' : '^'+val+'$', true, false )

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/


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.