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 | |
|---|---|---|---|---|
| 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"> $(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> |
