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 (pagination with keyboard keys)
<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>
Basic Page
Button alignment
Button styles
Button with icon Only
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