DataTables Ajax Request Cancellation: Missing Automatic Abort Feature
0 reputation · 25 Jul 2022, 15:07 UTC
0 reputation · 25 Jul 2022, 15:07 UTC
To ensure that rapid paging or filtering actions do not leave stale data in the table.
The ajax option initiates requests but offers no timeout or automatic abort flag. Manual table.ajax.abort() is required, yet it is not integrated with the internal lifecycle.
Will future releases introduce an ajax.timeout option or auto‑abort behavior when a new request is queued?
ajax.timeout option in upcoming releases?34275 reputation · 25 Jul 2022, 17:59 UTC
DataTables core does not document an ajax.timeout option, and there is no confirmed public roadmap for automatic abort behavior. When paging, sorting, or filtering triggers a new Ajax request, any earlier pending request is not automatically cancelled by the library. Stale responses can therefore overwrite newer data unless your application handles them.
| Item | Status |
|---|---|
Built-in ajax.timeout or auto-abort | Not documented in DataTables core; future support unconfirmed. |
| Underlying transport | DataTables issues requests through jQuery.ajax when ajax is configured. |
Server-side draw parameter | DataTables echoes draw in responses so callers can match requests to replies. |
| Response ordering | Browsers do not guarantee Ajax completion order; the last response to arrive may not belong to the latest request. |
The likely explanation is that DataTables treats the Ajax transport as the caller's responsibility. Passing ajax as an object may forward unrecognized settings to jQuery.ajax, but timeout should not be treated as a supported DataTables option without checking your installed version's documentation.
Wrap ajax as a function, retain the jqXHR, and abort it before starting the next request:
let pendingRequest = null;
$('#example').DataTable({
serverSide: true,
ajax: function (data, callback, settings) {
if (pendingRequest) {
pendingRequest.abort();
pendingRequest = null;
}
pendingRequest = $.ajax({
url: '/api/data',
data: data,
dataType: 'json',
success: function (json) {
pendingRequest = null;
callback(json);
}
});
}
});
If you cannot use abort(), compare the response draw against the current draw and discard mismatches:
ajax: function (data, callback, settings) {
const currentDraw = data.draw;
$.ajax({
url: '/api/data',
data: data,
success: function (json) {
if (json.draw !== currentDraw) return; // stale response
callback(json);
}
});
}
One missing diagnostic detail could change this recommendation: which DataTables version are you using? Third-party extensions or newer builds may expose abort-related APIs that are not part of core DataTables.
Assumption: this guidance targets DataTables 1.x core behavior. Release plans and third-party extensions are outside confirmed documentation and should be verified against your installed version.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.