Pagination plug-ins
The style of the pagination options that DataTables presents to the end-user can greatly effect the look and feel of your table, as well as, of course, the interaction behaviour. DataTables has four built in paging control types (pagingType
), and through the pagination plug-ins below you can add additional options.
How to use
To use a pagination plug-in you must include the pagination plug-in code from the plug-ins available below, after you load the DataTables library, but before you initialise the DataTable. When initialising the DataTable, you must also tell it to make use of this plug-in, rather than using the default, by setting the pagingType
to the value required by the plug-in.
As an example the code below makes use of the scrolling pagination plug-in saved into a file:
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.scrollingPagination.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"pagingType": "scrolling"
} );
} );
</script>
Plug-ins
ellipses | Show ellipses in the pagination control where there is a gap in numbers |
extjs | Pagination in the styling of ExtJS |
four_button | Display forward, back, first and last buttons. |
full_numbers_no_ellipses | Same pagination as 'full_numbers' but without ellipses |
input | Shows an input element into which the user can type a page number |
scrolling | Show page changes as a redraw of the table, scrolling records. |
select | Show a `dt-tag select` list of pages the user can pick from. |
simple_incremental_bootstrap | Shows forward/back buttons and all known page numbers. |
simple_numbers_no_ellipses | Same pagination as 'simple_numbers' but without ellipses |