From 43af718d6853b484845998f1a32384bc3c626843 Mon Sep 17 00:00:00 2001
From: Anandashankar Anil <anandasanil@gmail.com>
Date: Wed, 30 Apr 2025 11:25:54 +0200
Subject: [PATCH] Move search fields too when reordering headers

---
 run_dir/design/ont_flowcells.html | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/run_dir/design/ont_flowcells.html b/run_dir/design/ont_flowcells.html
index d9205755..09bfeb62 100644
--- a/run_dir/design/ont_flowcells.html
+++ b/run_dir/design/ont_flowcells.html
@@ -225,7 +225,25 @@ <h1>
  <!-- ONT Table Sorting -->
 <script type="text/javascript">
 $( document ).ready(function() {
-  init_listjs_ont();
+  var table = init_listjs_ont();
+  initColumnSearch(table);
+  table.on('column-reorder', function (e, settings, details) {
+     let footer = $('#ont_fc_table tfoot tr');
+     let inputs = footer.find('input').detach(); // Detach all inputs
+     // Clear footer
+     footer.empty();
+     // Rebuild footer row based on new column order
+    const tab = new $.fn.dataTable.Api(settings);
+    tab.columns().every(function (i) {
+         let th = $('<th></th>');
+         let input = $(inputs[details.mapping[i]] || $('<input type="text" />')); // Preserve existing input if possible
+         let headertext =$(tab.column(i).header()).text();
+         input.attr('placeholder', `Search ${headertext}`);
+         th.append(input);
+         footer.append(th);
+     });
+     initColumnSearch(tab); // Re-bind search
+    });
 });
 // Initialize sorting and searching javascript plugin
 function init_listjs_ont() {
@@ -266,7 +284,10 @@ <h1>
     $('#ont_fc_table_filter label').remove();
     $("#ont_fc_table_filter input").attr("placeholder", "Search..");
 
-    // Apply the search
+    return table;
+}
+
+function initColumnSearch(table) {
     table.columns().every( function () {
         var that = this;
         $( 'input', this.footer() ).on( 'keyup change', function () {