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>