[SO][OTHER] - Append custom control to dom using dataTables with bootstrap

https://stackoverflow.com/questions/44058982/append-custom-control-to-dom-using-datatables-with-bootstrap

by Muhammad Mushtaq Sheikh

HTML

<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.css">
<select id="select" class="form-control input-sm">
<option>Seq.</option>
<option>Name</option>
<option>Position</option>
<option>Office</option>
<option>Start date</option>
<option>Salary</option>
</select>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Seq.</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Seq.</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>2</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>22</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>2009/01/12</td>
     ...

CSS

select#select {
  width: 100px;
  display: inline-block;
}

JavaScript

var table = $('#example').DataTable({
  dom: "<'row'<'col-sm-5'l><'col-sm-7'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
                language: {
                    search: "_INPUT_", //To remove Search Label
                    searchPlaceholder: "Search..."
                }
})  
$(".dataTables_filter").append(select);
$('.dataTables_filter input').unbind().bind('keyup', function() {
  var colIndex = document.querySelector('#select').selectedIndex;
  table.column( colIndex).search( this.value ).draw();
});

$('#select').change(function() {
  table.columns().search('').draw();
});