Fonction de recherche dans un tableau HTML

Version imprimable

Hello !

J'aimerais mettre en place une fonction de recherche dans mon tableau HTML mais je n'arrive pas à me débrouiller.

Voici mon code .js :

Code:

1
2
3
4
5
6
7
8
9
      var $rows = $('#table tr');
      $('#search').keyup(function() {
          var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
 
          $rows.show().filter(function() {
              var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
              return !~text.indexOf(val);
          }).hide();
      });

Voici mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
                <input type="text" id="search" placeholder="Type to search">
                <table class="table table-bordered" id="table">
                    <thead>
                        <tr>
                            <th scope="col">Extension(s)</th>
                            <th scope="col">Registre</th>
                            <th scope="col">Lien vers le registre</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for name, detail in registrars.items %}
                        <tr>
                            <td> {{detail.domains}} </td>
                            <td>{{name}}</td>
                            <td> <a href="{{detail.link}}"> {{detail.link}} </a></td>
                        </tr>
                       {% endfor %}
                    </tbody>
                </table>

J'aimerais que quand je commence à taper un mot de ma recherche, cela filtre mon tableau et ne retourne que les résultats correspondants.

Le truc c'est que dans mon tableau je fais appelle à des variables python (je suis sous Django) et je pense que c'est ça qui bloque.

Une idée de comment faire ?

Merci !

17/08/2023, 15h38
mathieu

quelque soit le langage utilisé pour généré le code html, la page est utilisée par le navigateur donc c'est seulement la partie client qui est à prendre en compte.
montrez nous un exemple de code html généré pour qu'on puisse tester.

Au final j'ai réussi à me débrouiller !

Pour information voici le code que j'ai utilisé.

Mon script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <script type="">
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    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");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
    </script>

Mon tableau HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
                <input id='myInput' onkeyup='searchTable()' type='text' placeholder="Rechercher un domaine/registre" style="margin-bottom: 30px">
                <table class="table table-bordered" id="myTable">
                    <thead>
                        <tr>
                            <th scope="col">Extension(s)</th>
                            <th scope="col">Registre</th>
                            <th scope="col">Lien vers le registre</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for name, detail in registrars.items %}
                        <tr>
                            <td> {{detail.domains}} </td>
                            <td>{{name}}</td>
                            <td> <a href="{{detail.link}}"> {{detail.link}} </a></td>
                        </tr>
                       {% endfor %}
                    </tbody>
                </table>