How to remove ellipsis in JQuery DataTables pagination?
I am using JQuery DataTables (Datatables.net) with my grid. Let's say I have 45 pages in my grid as a whole, so currently the default "full_numbers" paging shows the following buttons:
First, Finally, 1,2,3,4,5, ..., 45, Next, Last
Now when I click the 5th page button the pagination renders the buttons like this:
First, Previous, 1, ..., 4,5,6, ..., 45, Next, Last
I don't want these ellipses, I want when the user clicks on the 5th page, I want to show the next 3 pages along with 1 previous page like this:
First, Previous, 4,5,6,7,8, Next, Last
So ultimately I want to remove the ellipses and show the previous page number, the current page number and the next n page numbers in this format:
First, Previous, {Previous Page}, {Current Page}, {next 3 pages}, Next, Last
Is there a way to make this possible in DataTables?
source to share
PROBLEM
The latest version of DataTables 1.10.7 does not have this capability by default.
There are pagination plugins that provide additional functionality, but unfortunately none of them provide this functionality.
DECISION
We have created the Total Number - No Ellipses and Prime Numbers - No Ellipses paging plugins to overcome this issue and display paging controls without ellipses.
-
Full Numbers - No
'pagingType': 'full_numbers'
Ellipses works the same as pagination , but excludes ellipses. -
Simple Numbers - No Ellipses plugin behaves similarly to pagination option
'pagingType': 'simple_numbers'
but excludes ellipses as well.
DEMO
For a demo and download of both plugins, see the Full Numbers example - No Ellipses plugin .
HOW TO USE
To use the "Simple Numbers - No Ellipses" plugin:
- download simple_numbers_no_ellipses.js
- turn it on after
jquery.dataTables.min.js
- use
'pagingType': 'simple_numbers_no_ellipses'
the initialization option.
To use the "Full Numbers - No Ellipses" plugin:
- download full_numbers_no_ellipses.js
- turn it on after
jquery.dataTables.min.js
- use
'pagingType': 'full_numbers_no_ellipses'
the init option.
For example:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.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>
source to share