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.

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary

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:

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

In addition to the above code, the following JavaScript library files are loaded for use in this example:

//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
//raw.githubusercontent.com/DataTables/Plugins/master/pagination/full_numbers_no_ellipses.js

The following CSS library files are loaded for use in this example to provide the styling of the table:

//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css

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

Comments

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.