Clever Geek Handbook

Displaying pages without ellipses in pagination control

I am using jQuery Datatables JS with Bootstrap, I ran into a problem where there is a workaround, but this is not the nicest.

Problem: my table contains over 4K records

If the person who works at the desk needs to work from 200 to 300 records and for convenience he needs to see 10 records per page, then he can click 5 on the page number, then 6, then 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 with 200, however, as I mentioned because of their work, it is easier for them to see more than 10-20 records per page).

Shown below is that I cannot navigate to other pages other than the first, last, next, or previous once I get to page 5

Are there any settings where I can tell to display all pages?

This table is handled server side and I added this option:

'sPaginationType' : 'full_numbers',

enter image description here

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) {
.....
+3


source to share


2 answers


PROBLEM

The latest version of DataTables 1.10.7 does not have this capability by default.

There are pagination plugins that provide additional functionality. One of them, Ellipses, has an option iShowPages

to determine the number of pages to display in the pagination control.



However, per @davidkonrad's note, the Elipses plugin does not fully support DataTables 1.10, i.e. it does not display the selected page and disables some buttons.

DECISION

See this answer or jQuery DataTables - pagination without ellipses for a better solution.

+3


source


I had this problem before, you can just hide the element using css at the top of your page, something like this:



 .ellipsis {
        display: none;
    }
0


source






More articles:


All Articles