Updating Datatables and changing everything that used fnReloadAjax to table.ajax.reload() and we have a page that has a main datatable and then each row has 3 buttons which open a modal popups each containing a datatable. We have a retrieve button that destroys all 4 tables if they exist and then reinitialize them. We are using ajax with server side and passing a parameter.
Initialize of one of the modal datatables:
cTable = $('.conflicts-table').DataTable({
response: true,
"processing": false,
"deferRender": true,
"dom": '<"top"p>rt<"bottom"i<"clear">',
"columns": [
{ "name": "description" },
],
"columnDefs": [
{ "mDataProp": "description", "targets": [0] },
],
"ajax": {
"url": "Conflict/getConflictsFor",
"data": function (d) {
d.id = modalRouteId;
}
}
});
Button click event for button in main datatable row:
$(document).on("click", ".view-conflicts", function (event) {
event.preventDefault();
modalRouteId = $(this).data("record").pkey;
var record = $(this).data("record");
$(".conflicts-modal > .md-content > div.route-info > .routeID").html(record.masterrouteid);
$(".conflicts-modal > .md-content .assignid").val(record.pkey);
$(".conflicts-modal > .md-content > div.route-info > .routeDate").html(formatJSONDate(record.routedate));
$(".conflicts-modal > .md-content > div.route-info > .routeStart").html(record.starttime);
$(".conflicts-modal > .md-content > div.route-info > .routeEnd").html(record.endtime);
$(".conflicts-modal").addClass("md-show");
cTable.ajax.reload().draw();
});
Modal:
<div class="md-modal conflicts-modal ">
<div class="md-content info container edit form-horizontal form-small">
<h3>Route Conflicts</h3>
<div class="route-info">
<i class="fa fa-fixed-width icon-road"></i><span class="routeID"></span>for <i class="fa fa-fixed-width icon-calendar"></i><span class="routeDate"></span>
<i class="fa fa-fixed-width icon-time"></i><span class="routeStart"></span>to <i class="fa fa-fixed-width icon-time"></i><span class="routeEnd"></span>
</div>
<div class="detailsbox">
<table class="table conflicts-table table-striped table-bordered">
<thead>
<tr>
<th>
Conflict
</th>
</tr>
</thead>
<tbody></tbody>
</table>
<span class="spin-loader"><i class="icon-spinner icon-spin icon-large"></i></span>
</div>
<div class="form-group float-right">
<div class="controls">
<a class="btn btn-danger tct-form-button closeModal">Close</a>
</div>
</div>
</div>
</div>
When the modal opens, I can see "Showing 1 to 1 of 1 entries", but I don't see the actual datatable.
One last thing, when reloading my main datatable, I have to call dTable.api().ajax.reload(), but on the modal datatables I have to call cTable.ajax.reload() because it complains that api() is undefined. Why are these called differently?