Bootstrap Table (Advanced Search)- Show all rows when custom button is clicked

Question

I am using bootstrap-table plugin . In this plugin i have added data-advanced-search for filtering rows depending on user input. So, whenever down arrow button is clicked a modal gets open . In this modal there are inputs for all columns and whenever a user type in this input rows are getting filtered .This is working fine .

Now , i need to clear filter whenever user click on clear button to show all rows inside table again. So , to achieve this i have search inside bootstrap-table-toolbar.min.js file and found below code which is responsible for clearing search & showing rows . i.e :

n.default("#avdSearchModalContent_".concat(e.idTable)).append(this.createFormAvd().join("")), n.default("#".concat(e.idForm)).off("keyup blur", "input").on("keyup blur", "input", (function(n) {
   "server" === e.sidePagination ? t.onColumnAdvancedSearch(n) : (clearTimeout(o), o = setTimeout((function() { t.onColumnAdvancedSearch(n)
        }), e.searchTimeOut))
     })

One solution i came up to achieve this is to use blur() event on inputs inside modal so that above code will get called and as the value of input is "" or null it will show all rows. This solution works if i have filtered rows using only one input inside modal else it doesn't work .

Demo Code :

$(function() {
  $('#table').bootstrapTable()
})
$(document).on("click", "#custom_clear", function() {
  $("#advancedSearch input").val("")
  $("#advancedSearch input:first").trigger("blur") //this works if user type only on first input in modal
  //$("#advancedSearch input").trigger("blur")//this also doesn't work
  //i have try to loop through input but this doesn't work
  /* $("#advancedSearch input").each(function(i){
   $(this).trigger("blur")
   })*/

})

<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<button type="button" id="custom_clear" class="btn btn-danger">Clear</button>
<table id="table" data-pagination="true" data-search="true" data-advanced-search="true" data-id-table="advancedTable" data-show-search-clear-button="true">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item1</td>
      <td>50</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item2</td>
      <td>50</td>
    </tr>
  </tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>

Can someone help me to solve this or Is there any other way to achieve above ?

Answer 1

Based on the source code, I've extended resetSearch function to do that:

BootstrapTable.prototype.resetSearch = function() {
  // reset default search input
  var $search = this.$toolbar.find('.search input');
  $search.val('');
  this.onSearch({
    currentTarget: $search
  });
  
  // reset advanced search input
  $(`#${this.options.idForm} input`).val('');
  this.filterColumnsPartial = {};
  if (this.options.sidePagination !== 'server') {
    this.options.pageNumber = 1;
    this.onSearch();
    this.updatePagination();
    this.trigger('column-advanced-search', {});
  }
}

$(function() {
  $('#table').bootstrapTable()
})
$(document).on("click", "#custom_clear", function() {
  $('#table').bootstrapTable('resetSearch');
})

<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<button type="button" id="custom_clear" class="btn btn-danger">Clear</button>
<table id="table" data-pagination="true" data-search="true" data-advanced-search="true" data-id-table="advancedTable" data-show-search-clear-button="true">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item1</td>
      <td>50</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item2</td>
      <td>50</td>
    </tr>
  </tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>

Update: Your code doesn't work because there is a timeout before the search when blur event triggered. If next blur event come, it clear that timeout and begin the new one so only change of the last blur calculated:

clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
  this.onColumnAdvancedSearch(e);
}, o.searchTimeOut);