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
Post a Comment