title: JQuery Bootstrap DataTables: Filter column containing select and input elements
body: <p>I have a Bootstrap DataTable with 3 columns:</p>
  
  <ul>
  <li>In column "Id" each cell has a plain <code>&lt;label .../&gt;</code> html element with string
  content </li>
  <li>In column "Name" each cell contains an <code>&lt;input .../&gt;</code> html element with respective values</li>
  <li>In column "Job" each cell contains a <code>&lt;select options .../&gt;</code>html element with respective values</li>
  </ul>
  
  <p>Using the default Filter object, I can filter the entire DataTable using the "Id" labels.
  However, I cannot filter the DataTable using values from the <code>&lt;select options .../&gt;</code> or from the <code>&lt;input .../&gt;</code> of each cell from the "Name" and "Job" columns.</p>
  
  <p>This is a piece of the datatable.</p>
  
  <p><a href="https://i.stack.imgur.com/PWy2Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PWy2Q.png" alt="enter image description here"></a></p>
  
  <p>Do you have any suggestions or jquery code samples I could follow? Thank you. </p>
  
  <p>I am not using serverSide option in the implementation.</p>
  
  <p>Here is the datatable:</p>
  
  <pre><code>$('#tbl').DataTable({
      "iDisplayLength": 50,
      "order": [[ 0, "asc" ]],
      "columnDefs": [{
          "sortable": false,
          "searchable" : true,
          "render" : function(data, type, full) { return data;},
          "targets": [1, 2]
      }]
     });
  </code></pre>