How to reset filter in html table

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

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>

Advertisement

Answer