serverSide table jumps to first page when last page items are less than pageLength

AmirAM

Hi,
Thank you for your great Library. I'm grateful for its contributions to my projects. However, I've encountered a bug where pagination jumps to the first page when item count is less than the page length. Your attention to this issue is appreciated.

Debugger code (debug.datatables.net):

https://debug.datatables.net/iyujad

Error messages shown:

There is no error in console

Description of problem:

The issue occurs when using server-side pagination in DataTables, specifically when the last page of the table has a number of items that is less than the specified page length. In this situation, upon loading the last page, the table briefly displays the remaining items but quickly triggers additional AJAX calls, causing the pagination to reset and jump back to the first page. As a result, users are unable to view the complete set of items on the last page.

options

https://gist.github.com/Amir-A-M/bb8883b61d99a07434727265c560dd76

draw 1 - page 1 ajax data

https://gist.github.com/Amir-A-M/368ab8bf735e36a4bad04fa5b87a02d3
It made two other calls: draw 2 and 3

draw 4 - page 3 ajax data // when I click on page 3

https://gist.github.com/Amir-A-M/cb53f40b24d143553a7f83f81f56597e

quickly triggers additional AJAX calls -- draw 5 and 6 back to page 1

https://gist.github.com/Amir-A-M/a4043b3d2624c44490e25c770a97e81c

Sorry for my poor choice of words

kthorngren

This example works properly when selecting the last page (page 6). The problem must be specific to your page. Sounds like there might be an event handler that that might be calling draw() or another API causing page 1 to be displayed. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

AmirAM

Thanks.
As you said, The issue was draw()

// Listens to changes in the size of the main content element (triggered by opening or closing the sidebar),
    // and redraws the datatable to fit the new size.
    const mainContent = $(".main-content")[0];

    const resizeObserver = observeResize(mainContent, (entry) => {
      table.draw();
    });