Quicksearch - Comment effectuer une recherche dans un tableau ?

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

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>

Quicksearch – Un plugin très utile !

Exemple

Par scoco