DataTables - Responsive
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/r/bs/dt-1.10.9,r-1.0.7/datatables.min.css">
<script src="https://cdn.datatables.net/r/bs/dt-1.10.9,r-1.0.7/datatables.min.js"></script>
<table class="table table-striped table-bordered table-hover dt-responsive nowrap" width="100%" id="table">
<thead>
<tr>
<th >Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
<tr>
<th><input type="text" data-column="1" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="2" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="3" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="4" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="5" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="6" class="form-control" placeholder="Search"></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
...
JavaScript
$(document).ready(function (){
var table = $('#table').DataTable({
responsive: true,
orderCellsTop: true,
"columns": [
/* { className:'all','width': "20px"},
{ className:'all'},
{ className:'all'},
{ className:'desktop'},
{ className:'desktop'},
{ className:'desktop'} */
]
});
/* $('#table thead').on( 'click', '.form-control', function (e) { // for text boxes
e.stopPropagation();
}); */
/* $('#table thead').on( 'keyup change', '.form-control', function (e) { // for text boxes
var i = $(this).attr('data-column'); // getting column index
var v = $(this).val(); // getting search input value
var table = $('#table').DataTable();
table.columns(i).search(v).draw();
}); */
});