Quicksearch – Comment effectuer une recherche dans un tableau dynamique ?

par scoco le
Rechercher

Quicksearch – Un plugin très utile !

Quicksearch est un plugin jQuery servant à rechercher une information dans un tableau de manière dynamique.

Pour le télécharger c’est ici : https://github.com/riklomas/quicksearch

Exemple


Effectuer une recherche Recherche…
Prenom Nom Pays Date Email
Aucuns résultats
Quintessa Kirk Nicaragua 31/08/2012 sociosqu.ad.litora@ornarefacilisis.ca
Rahim Bowen Norway 20/04/2013 purus.in@enim.ca
Clio Wong Cambodia 23/10/2012 et.malesuada@facilisis.edu
Adele Sandoval Greece 12/09/2013 tellus.non@elementum.com
Kaseem Ochoa Germany 06/06/2013 mauris.eu.elit@auguemalesuada.ca
Ori Daniels Mayotte 18/09/2012 est@nonummy.org
Akeem Grant Bosnia and Herzegovina 27/11/2012 sagittis@mipedenonummy.org
Nasim Lucas Chile 09/03/2014 ipsum@non.edu
Matthew Meyers Christmas Island 27/09/2012 in@vellectus.edu
Georgia Munoz Brunei Darussalam 03/10/2013 molestie.tellus@mollislectuspede.edu
Alexis Fry British Indian Ocean Territory 24/05/2012 urna@tellusAeneanegestas.org
Xander Washington Greenland 10/03/2013 enim.Sed@lacusvestibulumlorem.edu
Harriet Snider Faroe Islands 22/03/2014 Morbi@sitametante.org
Lysandra Dyer Chad 06/01/2014 rutrum@odio.edu
Hammett Ingram Eritrea 04/06/2013 vitae.nibh.Donec@Donecfelisorci.edu
Neve Roman Korea 17/05/2013 turpis@varius.ca
Zachery Perry Andorra 14/07/2012 dis@vulputate.com
Holly Blanchard Hong Kong 16/03/2013 est.mauris@Aeneanegestashendrerit.org
Chloe Reese Ecuador 02/09/2013 sit.amet@velarcuCurabitur.edu
John Todd Kenya 18/12/2013 vehicula@aliquetnecimperdiet.edu
Lucian York Fiji 20/10/2012 nec@sapien.org
Dominic Wilson Western Sahara 07/04/2012 semper.pretium@miac.ca
Cullen Cline Djibouti 26/06/2012 nibh.Phasellus.nulla@SuspendisseduiFusce.com


Pour ce résultat, le code est le suivant

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.scoco.fr/wp-content/uploads/2013/03/jquery.quicksearch.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
 $("#id_search").quicksearch("#resultTable tbody tr", {
 noResults: '#noresults',
 stripeRows: ['odd', 'even'],
 loader: 'span.loading'
 });
 });
</script>
<form action="#">
 <fieldset>
 <input type="text" name="search" value="" id="id_search" />
 <span>Recherche...</span>
 </fieldset>
</form>
<table cellspacing="1" cellpadding="1" id="resultTable">
 <thead>
 <tr>
 <th>Prenom</th>
 <th>Nom</th>
 <th>Pays</th>
 <th>Date</th>
 <th>Email</th>
 </tr>
 </thead>
 <tbody>
 <tr id="noresults">
 <td colspan="5">Aucuns résultats</td>
 </tr>
 <tr>
 <td>Quintessa</td>
 <td>Kirk</td>
 <td>Nicaragua</td>
 <td>31/08/2012</td>
 <td>sociosqu.ad.litora@ornarefacilisis.ca</td>
 </tr>
 ...
 ...
 ...
 <tr>
 <td>Georgia</td>
 <td>Munoz</td>
 <td>Brunei Darussalam</td>
 <td>03/10/2013</td>
 <td>molestie.tellus@mollislectuspede.edu</td>
 </tr>
 </tbody>
</table>