What does this script do?
This script enables pagination of a Bootstrap-styled DataTable using the left (←) and right (→) arrow keys on the keyboard.
JS
<script type="text/javascript">
$(document).keydown(function(e){
var myDemoTable = $('#demoTable').dataTable();
if (e.which == 37) {
myDemoTable.fnPageChange( 'previous' ); // ← Go to the previous page
return false; // ← Prevent default action (like scrolling)
}
if (e.which == 39) {
myDemoTable.fnPageChange( 'next' ); // ← Go to the next page
return false;
}
});
</script>
HTML
<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>
CSS
@import url("https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css");
JS (table)
<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>
JS - Additional Keyboard Keys
<script type="text/javascript">
$(document).keydown(function(e) {
var myDemoTable = $('#demoTable').DataTable();
switch (e.which) {
case 37: // ← Left Arrow
myDemoTable.page('previous').draw('page');
return false;
case 39: // ← Right Arrow
myDemoTable.page('next').draw('page');
return false;
case 36: // ← Home
myDemoTable.page('first').draw('page');
return false;
case 35: // ← End
myDemoTable.page('last').draw('page');
return false;
case 33: // ← Page Up
var currentPage = myDemoTable.page();
myDemoTable.page(Math.max(0, currentPage - 2)).draw('page');
return false;
case 34: // ← Page Down
var currentPage = myDemoTable.page();
var totalPages = myDemoTable.page.info().pages;
myDemoTable.page(Math.min(totalPages - 1, currentPage + 2)).draw('page');
return false;
}
});
</script>
Basic Page
Button alignment
Button styles
Button with an icon
Button with text and icon on the left
Button with text and icon on the right
Content pagination
Include CSS and JS Files
Modal window
Popover
Popover with HTML content
Progress bars
Progress bars with tooltip
Popover with HTML content and a close button
Responsive cards
Responsive cards styled like business cards
Responsive cards styled like post-it notes
Responsive columns
Table
Table pagination with keyboard keys
Tabs
Tooltip
Tooltip with HTML content