DataTables Pagination not working

fitta

I have a table whose data is populated from the back-end (Spring Boot) and displayed on the front-end using Thymeleaf. Currently I have defined my DataTables as the following:

$('#all-logs').DataTable({
        paging: true,
        scrollX: true,
        lengthChange : true,
        searching: true,
        ordering: true
      }); 

and the pagination buttons (Previous/Next/page number) all show up correctly. However when there is more than one page of data, and I click on the next button (or page 2), nothing happens (table still shows page 1 of the data), and I found the anchor tag of the button is set to the same page:

<li class="paginate_button page-item ">
<a href="#" aria-controls="all-logs" data-dt-idx="2" tabindex="0" class="page-link">2</a>
</li>

Anyone can point out what I am missing in this case? Could anyone kindly point me to some examples if applicable? Thanks in advance.

kthorngren

Don't know of any specific examples using Spring Boot and Thymelaf.

What does the info section show, ie, Showing 1 to 10 of 57 entries?

How many rows are returned from the server - look at the browser's developer tools to see exactly what is in the response?

Kevin

fitta

@kthorngren Thanks for the reply. The info section works as expected. For example, if there are 11 entries, and I set the number of entries per page to 10, then it shows "Showing 1 to 10 of 11 entries", and I can verify that the server has indeed returned 11 entries. The only thing that's not working is the "next" button or page number button, which, upon clicking, do nothing. The browser's console also doesn't show any error or warning.

kthorngren

The problem is specific to your environment. Can you post a link to your page or a test case replicating the issue? This way we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Did you look at the XHR response using the browser's developer tools? There should be 11 rows of data per your description.

Not sure what else you have on your page but I suggest starting with a simple page with just your Datatable config to see if it works then slowly add the remaining components. There may be something conflicting.

Kevin

fitta

@kthorngren Thank you. Please find my page here: http://datatabels-debug.s3-website-us-east-1.amazonaws.com/

As you can see from that page, I have 16 entries on the page, and the info shows up correctly. When you choose to display more than 10 items per page, you'll be able to view all the entries all at once. But somehow the pagination is not working.

My DataTables definition is in http://datatabels-debug.s3-website-us-east-1.amazonaws.com/js/custom/audittable.js

Another concern is that when I started the project, I didn't download all DataTable files from a same place, so I'm thinking it might be possible that some file versions are incompatible? Would that break the pagination?

Thanks again! And let me know if you need anything else.

kthorngren

Another concern is that when I started the project, I didn't download all DataTable files from a same place, so I'm thinking it might be possible that some file versions are incompatible? Would that break the pagination?

Its possible I suppose. You are loading a very old version of Datatables, 1.10.7 but new versions of buttons and select.

I took your table, audittable.js and used the Download builder to generate the Datatables CSS and JS include files including jQuery 3.3.1, BS 3, Buttons and Select. The example works here:
http://live.datatables.net/koyikaju/1/edit

That suggests you should upgrade Datatables or there is a conflict with on of the other libraries you are loading. I would first start by upgrading the Datatables components. If that fails then remove other components until you find the conflict.

Kevin

fitta

@kthorngren Ah, that's it! Having updated my jquery.dataTables.min.js file things are all working now. Thank you Kevin!

flavioportugal16

Boa tarde a todos!
Tive esse mesmo problema com o botão seguinte
Mudei de jguery.dataTables.min.js para jguery.dataTables.js
E na linha 4970 adicionei essas duas linhas

 else if ( action == "next" )
        {
            start = parseInt(start); /*adicione essa linha*/
            len = parseInt(len); /*adicione essa linha*/
            if ( start + len < records )
            {
                start += len;
            }
            
}

Em vez de soma estava concatenando e isso deixava a condicional sempre negativa.
Para mim as duas linhas acima resolveram o meu problema.