Quicksearch – Comment effectuer une recherche dans un tableau dynamique ?

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
Tate Walter Syrian Arab Republic 27/01/2014 in@egestasAliquam.com
Mariam Newman Madagascar 21/10/2012 Nunc@dictumeuplacerat.org
Barclay Sweet Slovakia 03/04/2013 facilisis.lorem@blandit.com
Kirsten Glover Reunion 07/10/2013 Mauris@ametlorem.com
Dorothy Bell Micronesia 04/11/2013 tortor.nibh.sit@augueidante.edu
Gail Park Cuba 29/01/2014 dictum@vulputate.org
Tana Macias Burkina Faso 16/08/2012 et.ipsum@magna.edu
Matthew Shields Denmark 14/01/2014 dictum@magnisdis.com
John Drake Gabon 02/05/2013 mattis.ornare.lectus@iaculisodio.com
Chester Franco France 01/04/2012 Nunc.lectus@a.edu
Linda Finch Sweden 22/08/2012 tincidunt@acarcuNunc.edu
Rose Lamb Korea, Republic of 05/06/2012 non.leo.Vivamus@faucibus.com
Helen Rice Hungary 18/11/2013 Sed@hendreritconsectetuer.com
Reagan Stuart Bangladesh 19/09/2013 justo@ullamcorper.org
Kadeem Carr Peru 29/11/2012 Nam@dignissimlacusAliquam.ca
Jolene Santiago Ukraine 22/07/2012 pharetra.sed@erosProin.com
Cadman Ellis Panama 17/01/2013 consequat.auctor@et.org
Camden Vazquez New Zealand 26/02/2014 mollis@bibendumullamcorperDuis.org
Audra Frazier Saint Lucia 09/09/2013 tincidunt@odio.ca
Tyler Benjamin Cook Islands 07/11/2013 Curabitur.ut.odio@eu.org
Garth Vazquez Wallis and Futuna 27/08/2013 augue@velfaucibusid.com
Petra Edwards Ireland 13/07/2013 felis.Nulla.tempor@eleifend.com
Germane Fleming Kiribati 04/07/2013 est.Mauris@sedleo.com
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">
&nbsp;&nbsp;&nbsp; $(document).ready(function () {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $("#id_search").quicksearch("#resultTable tbody tr", {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; noResults: '#noresults',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stripeRows: ['odd', 'even'],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loader: 'span.loading'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp; });
</script>
<form action="#">
&nbsp;&nbsp;&nbsp; <fieldset>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="search" value="" id="id_search" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>Recherche...</span>
&nbsp;&nbsp;&nbsp; </fieldset>
</form>
<table cellspacing="1" cellpadding="1" id="resultTable">
&nbsp;&nbsp;&nbsp; <thead>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <th>Prenom</th>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <th>Nom</th>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <th>Pays</th>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <th>Date</th>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <th>Email</th>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp; </thead>
&nbsp;&nbsp;&nbsp; <tbody>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr id="noresults">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td colspan="5">Aucuns résultats</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>Quintessa</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>Kirk</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>Nicaragua</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>31/08/2012</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>sociosqu.ad.litora@ornarefacilisis.ca</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>Georgia</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>Munoz</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>Brunei Darussalam</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>03/10/2013</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>molestie.tellus@mollislectuspede.edu</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp; </tbody>
</table>
 

 

Leave a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *