'Multiple datatables: ajax request for one table blocking events on other table
I am using the jQuery DataTable plugin. There are two datatables on one page (in bootstrap tabs), both loaded via ajax. When one table finishes loading, I'd like the user to be able to sort/change page/search it, even if the other table is still getting the data from the server. However, while either of the tables is making an ajax call, both tables are blocked from registering any sort/pagination/search events.
To check if clicks are being registered at all during ajax calls, I set up a regular click handler which shows that the column header is actually being clicked. However, that click only generates an datatables order event if there are no datatables ajax calls running.
$(function () {
// code here
// columns setup...
createDatatable(videoColumns, $("#VideoTab"), "Videos");
createDatatable(booksColumns, $("#BooksTab"), "Books");
});
function createDatatable(columns, $tableContainer, tableType) {
var $dataTable = $tableContainer.find(".custom-data-table");
var mTable = $dataTable.DataTable({
serverSide: true,
ajax: {
url: "/Tables/GetTableData",
data: function (d) {
return $.extend({}, d, {
tableType: tableType
});
},
type: "POST"
},
columns: columns
});
//isn't called when either table is still loading data
$dataTable.on('order.dt', function () {
console.log("table ordered " + tableType);
});
//this registers a click on the column header even when ajax is running
$tableContainer.on("click", function(e){
console.log(e.target);
});
}
There is a datatables internal setting that may be related, but I can't figure out what to change to stop it from blocking registering events on the table that is not currently making the ajax call.
/**
* Note if draw should be blocked while getting data
* @type boolean
* @default true
*/
"bAjaxDataGet": true,
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
