how to add a button inside a dropdown select using jQuery

Question

I am using jQuery DataTables. On table footer, I added bootstrap-select on each column to filter data.

I want to add a button 'Clear filter' inside the select dropdown as below :

The position of the button doesn't matter, it could be either below the search box or at the end...

So the div which wraps the search box has a class .bs-searchbox so what I did is : find the div with that class in current column then append my button inside.

var button = column.find('.bs-searchbox');
$('<button type="button" class="btn btn-sm btn-light">Clear filter</button>').appendTo(button); 

jQuery couldn't recognize .find as a function. Please find below a detailed explanation of my code.

Could you please suggest me what am I doing wrong ? Thank you very much.

$(document).ready(function() {

  var table = $('#example').DataTable({
    searching: false,
    info: false,
    paging: false,

    initComplete: function() {
      // loop through each colum in my datatable          
      this.api().columns().every(function() {

        var column = this;
        //append bootstrap selectpicker (multiple) on footer of current colum 
        var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple></select>')
          .appendTo($(column.footer()).empty());

        //get unique values of each column and append as options
        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>');
        });

        //add button 'clear filter' inside the select after search box
        /*
        var button = column.find('.bs-searchbox');
         $('<button type="button" class="btn btn-sm btn-light">Clear filter</button>').appendTo(button); 
        */

      });

      //apply bootstrap selectpicker
      $("select").selectpicker();

    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>

<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </tfoot>
</table>

Answer 1

Try to add button after $("select").selectpicker();

See below code.

$(document).ready(function() {

  var table = $('#example').DataTable({
    searching: false,
    info: false,
    paging: false,

    initComplete: function() {
      // loop through each colum in my datatable          
      this.api().columns().every(function() {

        var column = this;
        //append bootstrap selectpicker (multiple) on footer of current colum 
        var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple></select>')
          .appendTo($(column.footer()).empty());

        //get unique values of each column and append as options
        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>');
        });

      });

      //apply bootstrap selectpicker
      $("select").selectpicker();
      
      var button = $('.bs-searchbox');
         $('<button type="button" class="btn btn-sm btn-light">Clear filter</button>').appendTo(button); 
        

    }
  });
});