tech @ Beacon Deacon

A DataTable with Multiple Drop-down Select Menus
- Jamie Johnson

Jamie Johnson

November 7, 2017

You may be here after reading my article A DataTable with Drop-down Select Menus. The DataTable here simply shows an example of multiple drop-down menus (select menus). Look at the DataTable below:

Fighter Type Developed by Some Operators

Source for data: World Wide Military: 26 United States Fighter Jets: F-15, F-16, F-22, F-35, F/A-18

Want the code?

<script type="text/javascript" src="datatable/jquery-1.12.0.min.js"></script> 
<link rel="stylesheet" type="text/css" href="datatable/datatables.min.css"/> 
<script type="text/javascript" src="datatable/datatables.min.js"></script> 
<table cellpadding="0" cellspacing="0" border="0" class="display datatable"> 
<thead> 
    <tr class="dropdown"> 
        <td class="first"></td> 
        <td class="second"></td> 
        <td class="third"></td> 
        <td class="fourth"></td> 
    </tr> 
     
    <tr> 
        <th class="first">Fighter</th> 
        <td class="second">Type</td> 
        <td class="third">Developed by</td> 
        <td class="fourth">Some Operators</td> 
    </tr> 
</thead> 
<tfoot style="display:table-header-group"> 
<tr> 
	<td></td> 
	<td></td> 
	<td></td> 
	<td></td> 
</tr> 
</tfoot>  
<tbody id="itemsoutput"> 
</tbody> 
</table> 
<style type="text/css"> 
<!-- 
.dataTables_filter { position: relative; left: -40px; } 
--> 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var mesa = $('.datatable').DataTable( {  
        responsive: true, 
        "bAutoWidth": false, // toggle this depending on how wide you want the table 
        ajax: "http://tech.beacondeacon.com/fighters.txt", 
        columns: [ 
            { data: 'fighter' }, 
            { data: 'type' }, 
            { data: 'developer' }, 
            { data: 'operators' } 
        ], 
 
        initComplete: function () { // After DataTable initialized 
            this.api().columns([1,2,3]).every( function () { 
            /* use of [1,2,3] for second, third and fourth column.  Leave blank - columns() - for all.  
            Multiples? Use columns[0,1]) for first and second, e.g. */ 
                 var column = this;  
                 var select = $('<select><option value=""/></select>') 
                      .appendTo( $(column.footer()).empty() )  
                      .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>' )
                 } ); 
            } ); // this.api function 
        } //initComplete function  
 
    } ); 
} ); 
$( window ).resize(function() {  
  $('.datatable').removeAttr('style'); 
});  
</script> 
<style type="text/css"> 
<!-- 
@media all and (min-width: 120px){ 
.tabular-row, .tabular-cell { display: block; } 
} 
@media all and (min-width: 769px){ 
.tabular-row{ display: table-row; } 
.tabular-cell { display: table-cell; } 
} 
--> 
</style> 

Back to article A DataTable with Drop-down Select Menus

Back to top