如何去除 Jquery DataTables 分页中的省略号？

Question

I am using Jquery DataTables(Datatables.net) with my grid. Suppose I have 45 pages in my grid in total hence currently default pagination with 'full_numbers' showing following buttons:

First,Last,1,2,3,4,5,...,45,Next,Last

Now when I click on 5th page button, pagination shows buttons this way:

First,Previous,1,...,4,5,6,...,45,Next,Last

I don't want those ellipses, what I want is when user clicks on 5th page, I want to show 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 ellipses and show previous page number, current page number and next n page numbers in this format:

First,Previous,{previous page},{current page},{next 3 pages},Next,Last

Is there any way to make it possible in DataTables?

Answer 1

PROBLEM

Latest version of DataTables 1.10.7 does not have this ability by default.

There are pagination plug-ins that provide additional functionality, but unfortunately none of them provide this functionality.

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 example of Full Numbers – No Ellipses plug-in for demonstration and to download both plug-ins.

HOW TO USE

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.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>

Answer 2

You can fix it easily by using CSS.

1. In your browser right click on your "..." button and then select "Inspect". image description here

2. Copy the button ID. (for example my button id is CallingID_ellipsis ). image description here

3. Add "display: none" in your 'style'.

#CallingID_ellipsis {
  display: none !important;
}