jQuery / Datatables，在单击事件时发出 ajax 请求，同时仍然处理 DT 事件

Question

我希望延迟一个特别繁重的 Datatables AJAX 请求，直到点击导航的特定部分，同时仍保留 DataTables 提供的事件处理程序。

这是我目前的代码：

$(document).ready(function() {
   ...
    var traineesTable = $("#traineesTableId").DataTable({
        pageLength: 12,
        ordering: false,
        searching: false,
        processing: true,
        serverSide: true,
        lengthChange: false,
        select: 'multi',
        ajax: {
            url: '',
            dataType: "json",
            type: "post",
            data: function(d) {
                var formdata = $("#traineesSearchFormId :input").serializeArray();
                var data = {};
                $(formdata).each(function(index, obj) {
                    data[obj.name] = obj.value;
                });
                d = $.extend(d, data);
                return d;
            }
        },
        ...
    });

    // Navigation handler
    $('a[data-target="#trainees"]').click(function () {
        traineesTable.ajax.url = window.ajax_get_trainees_url;
        traineesTable.ajax.reload();
    });

    $("#trainee-search-button").click(function(e) {
        this.value = gettext("Please Wait");
        this.disabled = true;
        traineesTable.clear();
        traineesTable.ajax.reload();
        traineesTable.draw();
        this.value = gettext("Search");
        this.disabled = false;
    });

    // Additional DT functionality I want to keep
    traineesTable.on('select', function (e, dt, type, indexes) {
        if (type === 'row') {
            var row = traineesTable[type](indexes).nodes().to$();
            $("#trainees_ids").val($("#trainees_ids").val() + row.children().first().html() + ',');
            row.find('.checkbox-box').addClass('checked');
        }
    });
    
});

这会导致问题，因为 DataTables 需要一个有效的 url，并在未定义时抛出警报。

我已尝试将 traineesTable 创建移至 click() 处理程序内，但随后我收到未定义 traineesTable 的错误。

我觉得这应该很简单...