Search with several filters in an html table

Navigation
0

I have searched many pages for information on how to do a search with several filters in an html table.

That when searching, the data is typed in the first filter, and when entering the next data in the other filter, do not erase the data from the previous filter. I need to put several filters but none alter the search for the other.

HMTL code: 

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Busqueda Central" title="Busqueda Rapida" class="form-control">

<table id=myTable>

        <th>CODIGO</th>
        <th>CIUDAD</th>
        <th>CENTRAL</th>
        <th>EQUIPO</th>
        <th>TIPO DE EQUIPO</th>
        <th>MARCA</th>
        <th>MODELO</th>
        <th>UNIDAD</th>
        <th>CANTIDAD</th>

<tr>

    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>

</tr>

</table>

Search engine code that I am using: 

<script>
 function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
  td = tr[i].getElementsByTagName("td")[3];
   if (td) {
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
       tr[i].style.display = "none";
     }
    }       
  }
}

</script>
    
asked by DARCK DARCKGAMES GAMES 21.03.2018 в 16:30
source

1 answer

0

Try this plugin: link

An example like you have would be like this: 

$(document).ready(function() {
    $('#example').DataTable();
} );
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>           
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
    
answered by 21.03.2018 / 18:48
source
Get a string between the first parentisis that opens and the last one that closes call variable in another smarty template