Multiple datatables: ajax request for one table blocking events on another table

Question

I am using jQuery DataTable plugin. There are two types of data on one page (on the boot tabs): both are loaded via ajax. When one table finishes loading, I want the user to be able to sort / modify the page / search for it, even if the other table is still receiving data from the server. However, although either table makes an ajax call, both tables are blocked from registering sorting / paging / search events.

To check if clicks are logged at all during ajax calls, I set up a regular click handler that shows that the column header is actually. However, this click only generates a data order event if there are no ajax datatables 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);
    });
}

datatables, , , , , ajax.

    /**
     * Note if draw should be blocked while getting data
     *  @type boolean
     *  @default true
     */
    "bAjaxDataGet": true,