Add per-column search fields to the machines datatable

Based on an example from datatables.net

Signed-off-by: Adam D. Barratt <adam@adam-barratt.org.uk>

diff --git a/html/debdb.js b/html/debdb.js
index a92b8a6..936c7c6 100644 (file)
--- a/html/debdb.js
+++ b/html/debdb.js
@@ -1,5 +1,16 @@
 $(document).ready(function() {
-       $("#machines").DataTable({
+       $('#machines thead tr').clone(true).appendTo('#machines thead');
+       $('#machines thead tr:eq(1) th').each(function (i) {
+               var title = $(this).text();
+               $(this).html('<input type="text" placeholder="Search \''+title.toLowerCase()+'\'" />');
+               $('input', this).on( 'keyup change', function () {
+                       if (table.column(i).search() !== this.value) {
+                               table.column(i).search(this.value).draw();
+                       }
+               });
+       } );
+
+       var table = $("#machines").DataTable({
                orderCellsTop: true,
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]