ahora se puede search en las tablas

table.html ahora tiene la habilidad de buscar/filtrar resultados

templates/table.html

@@ -44,39 +44,84 @@
       {% endraw %}
     </nav>
 
-    <div class="container-fluid col-12">
-      <div class="container-fluid col-12">
-        <h1 class="col">
+    <div class="container-fluid">
+      <div class="row" >
+        <h1>
           {% raw %}
           {{info.dash_sub_name}}
           {% endraw %}
         </h1>
-        <div class="col" >
+      </div>
+      <div class="row" >
+        <div class="col-2" >
+          <div class="topnav">
+            <!-- ################################ con ayuda de w3schools:
+                                                How TO - Filter/Search Table-->
+            <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..">
+            <script>
+              function myFunction() {
+                // Declare variables
+                var input, filter, table, tr, td1, td2, td3, i, txtValue1, txtValue2, txtValue3;
+                input = document.getElementById("myInput");
+                filter = input.value.toUpperCase();
+                table = document.getElementById("tabla");
+                tr = table.getElementsByTagName("tr");
+
+                // Loop through all table rows, and hide those who don't match the search query
+                for (i = 0; i < tr.length; i++) {
+                  td1 = tr[i].getElementsByTagName("td")[0];
+                  td2 = tr[i].getElementsByTagName("td")[1];
+                  td3 = tr[i].getElementsByTagName("td")[2];
+                  if (td1 || td2 || td3) {
+                    txtValue1 = td1.textContent || td1.innerText;
+                    txtValue2 = td2.textContent || td2.innerText;
+                    txtValue3 = td3.textContent || td3.innerText;
+                    if ((txtValue1.toUpperCase().indexOf(filter) > -1) ||
+                        (txtValue2.toUpperCase().indexOf(filter) > -1) ||
+                        (txtValue3.toUpperCase().indexOf(filter) > -1)) {
+                      tr[i].style.display = "";
+                    } else {
+                      tr[i].style.display = "none";
+                    }
+                  }
+                }
+              }
+              </script>
+              <!-- ################################ -->
+          </div>
+        </div>
+        <div class="col-2" >
+          <!-- <button href='./' type="submit">Submit</button> -->
+        </div>
+        <div class="col-4" >
           {% raw %}
           <a class="btn button boton mr-4" href="{{info.add_link}}">{{info.add}}</a>
           {% endraw %}
         </div>
       </div>
+      <div class="row" >
+        <div class="col" >
+          <table id='tabla'>
+            <tr>
+              {% raw %}
+              <th ng-repeat="header in headers" class="header2">{{header.nombre}}</th>
+              {% endraw %}
+            </tr>
+            <tr ng-repeat="row in tabla">
+              {% raw %}
+              <!-- la proxima linea asume que las entradas en la tabla tienen un id unico con -->
+              <!-- el mismo nombre de identificador a traves de los javascript, json, etc. -->
+              <td ng-repeat="stat in row" ng-if="stat != row.user_id">
+                <div ng-bind-html="stat"></div>
+              </td>
+              <td><button type="button" class="btn2 boton mr-4" name="button" data-toggle="modal" data-target="#myModalv{{row.user_id}}">Ver mas</button></td>
+              <td><a type="button" class="btn2 boton mr-4" href="{{info.dir2}}{{row.user_id}}">Editar</a></td>
 
-      <table>
-        <tr>
-          {% raw %}
-          <th ng-repeat="header in headers" class="header2">{{header.nombre}}</th>
-          {% endraw %}
-        </tr>
-        <tr ng-repeat="row in tabla">
-          {% raw %}
-          <!-- la proxima linea asume que las entradas en la tabla tienen un id unico con -->
-          <!-- el mismo nombre de identificador a traves de los javascript, json, etc. -->
-          <td ng-repeat="stat in row" ng-if="stat != row.user_id">
-            <div ng-bind-html="stat"></div>
-          </td>
-          <td><button type="button" class="btn2 boton mr-4" name="button" data-toggle="modal" data-target="#myModalv{{row.user_id}}">Ver mas</button></td>
-          <td><a type="button" class="btn2 boton mr-4" href="{{info.dir2}}{{row.user_id}}">Editar</a></td>
-
-          {% endraw %}
-        </tr>
-      </table>
+              {% endraw %}
+            </tr>
+          </table>
+        </div>
+      </div>
     </div>
   </body>