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>