javascript - How to remove ellipsis in Jquery DataTables pagination? -


i using jquery datatables(datatables.net) grid. suppose have 45 pages in grid in total hence default pagination 'full_numbers' showing following buttons:

first,last,1,2,3,4,5,...,45,next,last

now when click on 5th page button, pagination shows buttons way:

first,previous,1,...,4,5,6,...,45,next,last

i don't want ellipses, want when user clicks on 5th page, want show next 3 pages along 1 previous page this:

first,previous,4,5,6,7,8,next,last

so want remove ellipses , show previous page number, current page number , next n page numbers in format:

first,previous,{previous page},{current page},{next 3 pages},next,last

is there way make possible in datatables?

problem

latest version of datatables 1.10.7 not have ability default.

there pagination plug-ins provide additional functionality, unfortunately none of them provide functionality.

solution

we have created pagination plug-ins "full numbers – no ellipses" , "simple numbers – no ellipses" overcome problem , display pagination control without ellipses.

  • "full numbers – no ellipses" plug-in behaves pagination option 'pagingtype': 'full_numbers' excludes ellipses.

  • "simple numbers – no ellipses" plug-in behaves pagination option 'pagingtype': 'simple_numbers' excludes ellipses also.

demo

see example of full numbers – no ellipses plug-in demonstration , download both plug-ins.

how use

to use "simple numbers – no ellipses" plug-in:

  • download simple_numbers_no_ellipses.js
  • include 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 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> 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -