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