Search code examples
javascriptjquerydatatables

How to remove ellipsis in Jquery DataTables pagination?


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?


Solution

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