jQuery DataTables: Pagination without ellipses

Problem

Table below demonstrates the default behavior of pagination option 'pagingType': 'full_numbers'. Click on page 5 or above to see ellipses (...) on both sides of the current page.

Solution

We have created pagination plug-ins “Full Numbers – No Ellipses” and “Simple Numbers – No Ellipses” to overcome this problem and display pagination control without ellipses.

• “Full Numbers – No Ellipses” plug-in behaves similarly to pagination option 'pagingType': 'full_numbers' but excludes ellipses.
• “Simple Numbers – No Ellipses” plug-in behaves similarly to pagination option 'pagingType': 'simple_numbers' but excludes ellipses also.

Demo

See the example of “Full Numbers – No Ellipses” plug-in below for demonstration:

$(document).ready(function (){
   $('#example').DataTable({
      'ajax': '/lab/articles/jquery-datatables-pagination-without-ellipses/arrays-many.txt',
      'pagingType': 'full_numbers_no_ellipses'
   });
});

How to use

To use a pagination plug-in you must download and include it after you load the DataTables library, but before you initialize the DataTable. When initializing 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.

To use “Simple Numbers – No Ellipses” plug-in:

• download simple_numbers_no_ellipses.js
• include it after jquery.dataTables.min.js
• use 'pagingType': 'simple_numbers_no_ellipses' initialization option.

To use “Full Numbers – No Ellipses” plug-in:

• download full_numbers_no_ellipses.js
• include it after jquery.dataTables.min.js
• use 'pagingType': 'full_numbers_no_ellipses' initialization option.

For example:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">

<script type="text/javascript" src="full_numbers_no_ellipses.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#example').DataTable( {
            'pagingType': 'full_numbers_no_ellipses'
        } );
    } );
</script>

License

MIT License, opensource.org/licenses/MIT

Download

simple_numbers_no_ellipses.js

full_numbers_no_ellipses.js

You May Also Like

jQuery DataTables: Row selection using checkboxes and Select extension

jQuery DataTables: Row selection using checkboxes

jQuery DataTables: Why click event handler does not work

jQuery DataTables: Alphabetical Search