<table id="demoTable" class="table table-striped">
<thead>
<tr>
<th>Year</th>
<th>Song Title</th>
<th>Artist</th>
</tr>
</thead>
<tbody>
<tr>
<td>1979</td>
<td>Ain't No Stoppin' Us Now</td>
<td>McFadden & Whitehead</td>
</tr>
<tr>
<td>2012</td>
<td>One More Night</td>
<td>Maroon 5</td>
</tr>
<tr>
<td>1975</td>
<td>I'm Sorry</td>
<td>John Denver</td>
</tr>
<tr>
<td>2009</td>
<td>Hotel Room Service</td>
<td>Pitbull</td>
</tr>
<tr>
<td>1997</td>
<td>Something About the Way You look Tonight</td>
<td>Elton John</td>
</tr>
<tr>
<td>1973</td>
<td>Free Electric Band</td>
<td>Albert Hammond</td>
</tr>
<tr>
<td>1965</td>
<td>Go Now</td>
<td>The Moody Blues</td>
</tr>
<tr>
<td>1973</td>
<td>Hi Hi Hi</td>
<td>Wings</td>
</tr>
<tr>
<td>1970</td>
<td>Neanderthal Man</td>
<td>10CC</td>
</tr>
<tr>
<td>1989</td>
<td>Another Day in Paradise</td>
<td>Phil Collins</td>
</tr>
<tr>
<td>2006</td>
<td>Irreplaceable</td>
<td>Beyonce</td>
</tr>
</tbody>
</table>
@import url("https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css");
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$("#demoTable").DataTable({
paging: true,
pageLength: 4,
ordering: true,
info: false,
lengthChange: false,
language: {
search: "_INPUT_",
searchPlaceholder: "Search",
paginate: {
next: 'Next',
previous: 'Previous'
}
},
search: {
addClass: 'form-control input-lg col-xs-12',
},
});
});
</script>
<script type="text/javascript">
$(document).keydown(function(e){
var myTable = $('#demoTable').dataTable();
if (e.which == 37) {
myTable.fnPageChange( 'previous' );
return false;
}
if (e.which == 39) {
myTable.fnPageChange( 'next' );
return false;
}
});
</script>