[Mode editor] Added column filtering

application/views/mode/index.php

@@ -27,8 +27,8 @@
 				<tr>
 					<th scope="col">Mode</th>
 					<th scope="col">Sub-Mode</th>
-					<th scope="col">SSB/DATA/CW</th>
-					<th scope="col">Active</th>
+					<th scope="col">SSB / DATA / CW</th>
+					<th scope="col">Status</th>
                     <th scope="col"></th>
 					<th scope="col"></th>
 					<th scope="col"></th>
@@ -58,6 +58,17 @@
 
 				<?php } ?>
 			</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>
+				</tr>
+			</tfoot>
 		<table>
   </div>
   <br/>

assets/js/sections/mode.js

@@ -5,7 +5,29 @@ $('.modetable').DataTable({
 	"scrollY": "500px",
 	"scrollCollapse": true,
 	"paging": false,
-	"scrollX": true
+	"scrollX": true,
+	initComplete: function () {
+		this.api()
+			.columns()
+			.every(function () {
+				var column = this;
+				var select = $('<select><option value=""></option></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>');
+					});
+			});
+	},
 });
 
 function createModeDialog() {