To be brief, I‘m looking for a way to reset my filter made on jquery. This is my html for searching, input text + button submit:
<label for="formInput">Rrecherche: </label> <input class="form-control search-box__input" name="formInput" type="text" id="formInput" /> <input type="submit" id="btn-search" class="search-box__submit cc-btn" value="rechercher"> <button type="button" class="search-box__reset" id="search-box__reset">Réinitialiser</button>
Html table :
<table class="cc-table table table-bordered" id="cc-table"> <thead> <tr> <th> <p> Candidat(e) </p> </th> <th> <p> parrainages validés </p> </th> <th> <p> 01/03/2022 </p> </th> <th> <p> 03/03/2022 </p> </th> </tr> </thead> <tbody> <tr style=""> <td> <p> ZARTHAUD Nathalie </p> </td> <td> <p> Mark </p> </td> <td> <p> Otto </p> </td> <td> <p> @mdo </p> </td> </tr> <tr style=""> <td> <p> ASSELINEAU François </p> </td> <td> <p> Jacob </p> </td> <td> <p> Thornton </p> </td> <td> <p> @fat </p> </td> </tr> <tr style=""> <td> <p> HAMON Benoît</p> </td> <td> <p>Larry the Bird </p> </td> <td> <p> @twitter </p> </td> <td> <p>Larry the Bird </p> </td> </tr> </tbody> </table>
This is my jquery to filter an html table :
……………………………………
……………………………………
……………………………………
$("#btn-search").on('click', function (e) { var value = $("#formInput").val().toLowerCase(); $("#cc-table tbody tr").filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); });
Thank you
Advertisement
Answer
Simple, once the “reset” button is clicked, the value of the input will be changed to empty and starting the search will reset the filter.
$("#btn-search").on('click', function(e) { let value = $("#formInput").val().toLowerCase(); $("#cc-table tbody tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); $("#search-box__reset").on('click', function(e) { let value = $("#formInput").val('').text(''); $("#btn-search").click(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="formInput">Rrecherche: </label> <input class="form-control search-box__input" name="formInput" type="text" id="formInput" /> <input type="submit" id="btn-search" class="search-box__submit cc-btn" value="rechercher"> <button type="button" class="search-box__reset" id="search-box__reset">Réinitialiser</button> <table class="cc-table table table-bordered" id="cc-table"> <thead> <tr> <th> <p> Candidat(e) </p> </th> <th> <p> parrainages validés </p> </th> <th> <p> 01/03/2022 </p> </th> <th> <p> 03/03/2022 </p> </th> </tr> </thead> <tbody> <tr style=""> <td> <p> ZARTHAUD Nathalie </p> </td> <td> <p> Mark </p> </td> <td> <p> Otto </p> </td> <td> <p> @mdo </p> </td> </tr> <tr style=""> <td> <p> ASSELINEAU François </p> </td> <td> <p> Jacob </p> </td> <td> <p> Thornton </p> </td> <td> <p> @fat </p> </td> </tr> <tr style=""> <td> <p> HAMON Benoît</p> </td> <td> <p>Larry the Bird </p> </td> <td> <p> @twitter </p> </td> <td> <p>Larry the Bird </p> </td> </tr> </tbody> </table>