From: Adam D. Barratt <adam@adam-barratt.org.uk>
Date: Fri, 8 Nov 2019 15:15:36 +0000 (+0000)
Subject: Add per-column search fields to the machines datatable
X-Git-Url: https://git.adam-barratt.org.uk/?p=mirror%2Fuserdir-ldap-cgi.git;a=commitdiff_plain;h=784768441aff9f2ad41ae6ef12c4f6e965c5bcc4

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
--- 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"]]