ajax.repload(null, false) tries to show page number > number of pages

edwardiv1

Description of problem:
When using datatable.ajax.reload(null, false) to reload the table, it shows an empty table with the information:
"Showing 201 to 27 of 27 entries".

To reproduce:
1. Load a full datatable with multiple pages;
2. Change to some high page number, e.g. 10;
3. Apply a filter to the ajax query and call ajax.reload(null, false) so that the results are much fewer than the original results;
4. Datatables will have only 1 page of results, but due the false argument will attempt to remain on page 10, showing an empty page (which looks like an empty table/result set).
5. Using the pages control, it's possible to go to page 1 and see the data, but that's not intuitive and confuses users to see an empty table.

I would have expected in this case that datatables would show the closest page of data possible or even reset to page 1.

colin

I'm not seeing that here:

1. i went to page 10
2. searched for London
3. clicked "Reload data"

and the paging is as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

kthorngren

@colin I remember seeing something like this in the past. I don't have an easy way to recreate a test case but I think if you change yours to client side processing and return fewer rows with the ajax.reload() you will see the problem with the paging. I think the OP is saying that the filter is applied using ajax.data.

Kevin

colin

If it's not using serverSide, that could be the case. We've got an outstanding internal issue (DD-922 for my reference) where there are paging problems if the data returned from ajax.url().load() is smaller than the original data set. It sounds likely that these could be the same issue.

I've added this thread to the issue and we'll report back here when there's an update.

Cheers,

Colin

edwardiv1

I'm not using the serverSide option and the filtering is being done on the server by passing filter parameters in the ajax data option like this:

stateSave: true,
"pageLength": 50,
"deferRender": true,
"lengthChange": false,
"ajax": {
  "url": "/mydataurl",
  "dataSrc": "data",
  "data": function ( d ) {
    d.var1 = $('#filterForm\\:var1flt').val();
  }
},

You're right in that the filtered result set is indeed smaller than the original result set. Datatables still attempts to show page 5 when there is only one page.

colin

I'm not using the serverSide option and the filtering is being done on the server by passing filter parameters in the ajax data option

That's likely to confuse the paging, since without serverSide, all the data is expected to be on the client - as the client is then responsible for the searching. It sounds like you've got a mismatch of serverside and not, so I wouldn't be surprised that you're seeing the issues you are,

Colin

edwardiv1

@colin Are you saying this is not a valid use-case?

I do the filtering like that for efficiency, but serverSide would mean I'd need to handle additional filtering and paging logic on the server too. I like the way datatables handles all of that on the client-side.

I don't understand why there should be a mismatch here with serverSide. Couldn't datatables simply reset the paging if the number of pages is less than the page it wants to be on?

allan

Hi,

I think the base issue here is the false parameter being passed into the ajax.reload() method. That is explicitly telling DataTables not to reset the paging. However, due to the new data, the paging does actually need to be reset (or perhaps rolled back to the last possible page).

I could certainly add something in for this, but if you are expecting the data to change, why pass in the false parameter to hold the paging as it is? Would it not make sense to allow it to reset?

Allan

edwardiv1

Hi @allan ,
There are two buttons: [Filter] and [Refresh]. Filter resets the pages, and Refresh would not: [Filter] calls ajax.reload(); and [Refresh] calls ajax.reload(null, false);

The problem is that both calls send the filter parameters in the ajax.data request (code in my earlier post), so pressing [Refresh] could change the result set if the user changed the filters; they're supposed to press [Filter], which will reset the pages, but they might instead press [Refresh], which then shows them a blank table due to this paging issue and causes them a lot of confusion.

To simplify the UI, we then made it use the one button (only [Refresh]). Same problem with paging and then changed it back to two buttons. It causes UI problems both ways.

I'm not sure of a neat way of addressing it without datatables resetting the paging when the number of pages is less than the page it wants to be on.

allan

It sounds like to me that you might want to change how the data is added to the request to the server? Perhaps something like this:

// Accessible variable
let lastFilter = {};

// In DataTables initialisation
ajax: {
  url: ...,
  data: function (d) {
    $.extend(d, lastFilter);
  }
}

// Filter button
action: function () {
  lastFilter.data1 = data1;
  lastFilter.data2 = data2;
  ...

  table.ajax.reload();
}

// Refresh button
action: function () {
  table.ajax.reload(null, false);
}

Would that perhaps fix the interaction issue, and side step this issue in DataTables?

Allan

edwardiv1

@allan Yes, that would work. I had considered something like that, but was trying to avoid the extra complexity (granted it's not overly complex, but there are many filters involved).

I also thought that datatables showing a blank table or invalid page should be considered a bug regardless, but that's obviously your call.

Thanks
(fantastic product, by the way!)

allan

Thank you .

I think this is a bug in DataTables - we do need a "rewind" there, but I'm not 100% sure what the right way to do it is. I've got an internal bug for this to so I can mull it over a bit!

Allan