Updating from 1.9 to 1.10 and datatable won't draw in modal

bdk0172

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?

bdk0172

I used the DataTables debug and code is edepup if that helps.

bdk0172

Figured it out. We had a "dom" value of '<"top"p>rt<"bottom"i<"clear">' that apparently doesn't work with 1.10. Will figure out what it should be and fix.