Comment faire de liste déroulante filtre pour une table à l'aide de jQuery?
Je veux faire la liste déroulante filtre de table dans des colonnes spécifiques, par exemple je veux faire un filtre pour le "Mariage" de la Colonne" & sélectionnez oui ou non dans la liste déroulante,c'est ma table:
J'ai besoin d'un code jquery pour m'aider à faire le filtre.
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Maried</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>yes</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>no</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>yes</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>no</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>no</td>
</tr>
</tbody>
</table>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/filter.js"></script>
Vous devez vous connecter pour publier un commentaire.
Essayer ce - utilise une regex et jQuery fonction de filtre pour filtrer les résultats en fonction de la liste select onchange (à l'aide d'un ajout de la classe pour le tr est à l'écran de contrôle). Cela peut aussi être utilisé dans une saisie de texte version live filtrer toute les lignes de la table pour tout le contenu de sorte que vous pouvez taper les noms de peuples, etc et obtenir la fonction de filtre pour afficher uniquement les noms correspondants.
J'ai aussi mis un "tout" option pour afficher tous les tr de nouveau (dans les faits, removinmg le filtre). Notez qu'il cache simplement la non-correspondance des lignes, ce qui signifie que les rayures aspect de la table ne sera pas nécessairement écran comme vous le souhaitez, mais quand j'ai mis en place quelque chose comme ça - j'ai aussi ajouté une fonction de re-rayé de la table basée sur le nombre de lignes et pair /impair etc APRÈS l'application du filtre, afin de re-entrelacement de l'affichage de la table.
HTML: