[Mode editor] Tweaked column filtering

application/views/mode/index.php

@@ -25,10 +25,10 @@
 		<table style="width:100%" class="modetable table table-striped">
 			<thead>
 				<tr>
-					<th scope="col">Mode</th>
-					<th scope="col">Sub-Mode</th>
-					<th scope="col">SSB / DATA / CW</th>
-					<th scope="col">Status</th>
+					<th class="select-filter" scope="col">Mode</th>
+					<th class="select-filter" scope="col">Sub-Mode</th>
+					<th class="select-filter" scope="col">SSB / DATA / CW</th>
+					<th class="select-filter" scope="col">Status</th>
                     <th scope="col"></th>
 					<th scope="col"></th>
 					<th scope="col"></th>
@@ -60,17 +60,17 @@
 			</tbody>
 			<tfoot>
 				<tr>
-					<th scope="col"></th>
-					<th scope="col"></th>
-					<th scope="col"></th>
-					<th scope="col"></th>
-                    <th scope="col"></th>
-					<th scope="col"></th>
-					<th scope="col"></th>
+					<th></th>
+					<th></th>
+					<th></th>
+					<th></th>
+					<th></th>
+					<th></th>
+					<th></th>
 				</tr>
 			</tfoot>
 		<table>
-  </div>
+	</div>
   <br/>
   <p>
 	  	<button onclick="createModeDialog();" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Create a Mode</button>

assets/js/sections/mode.js

@@ -5,10 +5,10 @@ $('.modetable').DataTable({
 	"scrollY": "500px",
 	"scrollCollapse": true,
 	"paging": false,
-	"scrollX": true,
+	"scrollX": true,	
 	initComplete: function () {
 		this.api()
-			.columns()
+			.columns('.select-filter')
 			.every(function () {
 				var column = this;
 				var select = $('<select><option value=""></option></select>')
@@ -29,6 +29,7 @@ $('.modetable').DataTable({
 			});
 	},
 });
+$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
 
 function createModeDialog() {
 	$.ajax({