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

extjs	Pagination in the styling of ExtJS
full_numbers_no_ellipses	Same pagination as 'full_numbers' but without ellipses
scrolling	Show page changes as a redraw of the table, scrolling records.
input	Shows an input element into which the user can type a page number
select	Show a `dt-tag select` list of pages the user can pick from.
ellipses	Show ellipses in the pagination control where there is a gap in numbers
simple_numbers_no_ellipses	Same pagination as 'simple_numbers' but without ellipses
simple_incremental_bootstrap	Shows forward/back buttons and all known page numbers.
four_button	Display forward, back, first and last buttons.