64057

Displaying pages without ellipses in the pagination control of a datatable

Question:

I am using jQuery Datatables JS with Bootstrap, I am running into an issue where there is a workaround but it is not the nicest.

The issue: my table contains more than 4k records

If the person who is working on the table needs to work from record 200 to 300 and for easibility, he needs to see 10 records in a page, then he can click on 5 on the page number, and then on 6, then on 7 and all the way to page 20. (I know the work around will be to display 100 records and just click on page 3 to start from 200, however as I mentioned due to their job it is easier for them to see no more than 10-20 records per page).

The image below shows that I am unable to go other pages other than first,last, next or previous once I reach page 5

Is there any settings where I can say display all the pages?

This table is processed server side, and I have added the option:

'sPaginationType' : 'full_numbers',

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/0eQAw.jpg" data-original="https://i.stack.imgur.com/0eQAw.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

EDIT:

<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="//cdn.datatables.net/tabletools/2.2.2/css/dataTables.tableTools.css" rel="stylesheet" type="text/css" /> <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> <script src="//code.jquery.com/jquery.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script> <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/ellipses.js"></script> <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/select.js"></script> j$(document).ready(function() { j$('#sharkTankTable').dataTable({ 'aoColumns': aoColumns, 'sPaginationType': 'listbox', // 'pageLength': 10, // // 'sPaginationType': 'ellipses', // 'iShowPages': 10, 'bProcessing': true, 'bServerSide': true, // 'sPaginationType' : 'full_numbers', 'sDom': 'T<"clear">lfrtip', 'bFilter': true, 'tableTools':{"sSwfPath": "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls_pdf.swf"}, 'sAjaxSource': 'fakeUrl', 'fnServerData': function(sSource, aoData, fnCallback) { .....

Answer1:

<h3>PROBLEM</h3>

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

There are <a href="http://datatables.net/plug-ins/pagination/" rel="nofollow">pagination plug-ins</a> that provide additional functionality. One of them, <a href="http://datatables.net/plug-ins/pagination/ellipses" rel="nofollow">Ellipses</a>, has iShowPages option allowing to define number of pages to display in pagination control.

However per <a href="https://stackoverflow.com/questions/30633288/displaying-all-pages-from-the-pagination-of-a-datatable/30633820#comment49350727_30633820" rel="nofollow">@davidkonrad's note</a>, Ellipses plug-in doesn't fully support DataTables 1.10, i.e. doesn't show currently selected page and disabled state of some buttons.

<h3>SOLUTION</h3>

See <a href="https://stackoverflow.com/a/30850489/3549014" rel="nofollow">this answer</a> or <a href="https://www.gyrocode.com/articles/jquery-datatables-pagination-without-ellipses/" rel="nofollow">jQuery DataTables – Pagination without ellipses</a> for a better solution.

Answer2:

i had this problem before , you can just hide the element using css on the top of your page , just like this :

.ellipsis { display: none; }

Recommend

  • not able to push the app to heroku
  • Bootstrap modal cut in half
  • Angular-UI datepicker doesn't work within a directive with isolate scope
  • Backbone not defined with require js
  • how to make directive in angular of owl carousel?
  • How to split an image responsive into two div blocks using css?
  • in this page hover is not working i dont know why and also footer is not taking 100% width even thou
  • Spring Web Security locks Neo4j embedded database
  • Nested jQuery tabs
  • How to create local push notification using react-native-push-notification
  • What going wrong in using PropertiesConfiguration?
  • Duplicate Element x number of times with XSLT
  • Using target on div without a href
  • BackgroundMediaPlayer set Uri source of Media library item
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • ResponseBuilder is not working when used with entity object
  • Is it possible to control programs with Javascript?
  • Left fixed columns with table colspan
  • how to add semantic ui in a rails app?
  • NetBeans doesn't see style.css [duplicate]
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • How to add regEx in angular filter
  • Responsive Form on top of Responsive Image? - Bootstrap
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Application level floating views with navigation in Android
  • AndEngine Applying Transparancy to AndEngine View
  • Simulate click Geckofx vb,net
  • Using a canvas object in a thread to do simple animations - Java
  • Adjust width of select element according to selected option's width
  • How to revert to previous XCode version?
  • azure media services - The request body is too large and exceeds the maximum permissible limit
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • Avoid links criss cross / overlap in d3.js using force layout
  • HTML download movie download link
  • Modifying destination and filename of gulp-svg-sprite
  • bootstrap to use multiple ng-app
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery