jQuery Datatables responsive example
HTML
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th class="no-sort"></th>
<th>Product</th>
<th>Product Category</th>
<th>Views</th>
<th>Average View Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Accu-Pass Suture Shuttle</td>
<td>Suture Shuttle</td>
<td>1,500 views</td>
<td>8:38 minutes</td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function() {
$('#example1').DataTable( {
responsive: true,
columnDefs: [
{ targets: 'no-sort', orderable: false }
],
"paging": false,
"lengthChange": true,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": true
} );
} );