Base BootStrap DataTable

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
    <table id="example">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>
                    <select>
                        <option value="">Please choose</option>
                        <option value="System Architect" selected="selected">System Architect</option>
                        <option value="Accountant">Accountant</option>
                        <option value="Senior Javascript Developer">Senior Javascript Developer</option>
                        <option value="Junior Technical Author">Junior Technical Author</option>
                    </select>    
                </td>
                <td>Edinburgh</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>
                    <select>
                        <option value="">Please choose</option>
                        <option value="System Architect">System Architect</option>
                        <option value="Accountant" selected="selected">Accountant</option>
                        <option value="Senior Javascript Developer">Senior Javascript Developer</option>
                        <option value="Junior Technical Author">Junior Technical Author</option>
                    </select>    
                </td>
                <td>Tokyo</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>
                    <select>
                   ...

JavaScript

$(document).ready(function(){
    var table = $('#example').DataTable({
    	"columnDefs": [
    		{
            	"orderDataType": "dom-select", 
                "type": "html", 
                "targets": 2 
            }
  		]
    });
    $.fn.dataTable.ext.search.push(
       function(settings, data, dataIndex) {
          var tdValues=[];
          var $tds=table.row(dataIndex).nodes().to$().find('td');
          $tds.each(function(){
          	 var $this=$(this);
             var hasSelect=$this.find('select').length >0; // check if current cell has a select box
             var curTdValue= hasSelect ? $this.find('option:selected').text() : $this.text();
             tdValues.push(curTdValue);
          });
          var rowValues=tdValues.join(' ');
          return !!~rowValues.toLowerCase().indexOf(table.search().toLowerCase()); 
       }     
    );
});

/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function (settings, col){
	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('select', td).val();
    });
}