jQuery DataTable 1.10.8版本Ajax请求无法通过点击按钮取消问题求解

你原有代码中直接调用table.context[0].jqXHR.abort()的写法存在两处缺陷：

• AJAX请求完成后jqXHR对象会被自动回收，此时调用会抛出未定义异常
• 连续触发多次请求时，只能获取到最后一次请求的实例，容易出现取消逻辑失效的问题

修复后的完整实现 #

1. 调整DataTable初始化配置，新增请求实例存储逻辑 #

// 定义变量存储最新的AJAX请求实例
let currentXhr = null;
let table = $('#data-table').DataTable({
    destroy: true,
    responsive: true,
    serverSide: false,
    autoWidth: false,
    paging: true,
    filter: true,
    searching: true,
    stateSave: true,
    scrollX: true,
    lengthMenu: [5, 10, 25],
    language: {
        "search": "Filtrer: "
    },
    ajax: {
        url: '/User/GetUsersByDepartment',
        type: 'POST',
        data: {
            QueryValue: departmentName,
            Type: type
        },
        dataSrc: '',
        // beforeSend阶段存储请求实例
        beforeSend: function(xhr) {
            currentXhr = xhr;
        }
    },
    columns: [
        {
            title: 'Display Name',
            data: 'UserName',
        },
        {
            title: 'Date Joined',
            data: 'JoinedDate',
        } 
    ],
    initComplete: function (settings, json) {
        HideSpinner();
        // 业务逻辑处理
        currentXhr = null; // 请求完成后清空实例
    }
// 监听xhr事件，兼容所有请求场景存储最新实例
}).on('xhr.dt', function (e, settings, jqXHR) {
    currentXhr = jqXHR;
}).order([[1, 'asc']]).draw(false);

2. 调整取消按钮触发逻辑，增加容错判断 #

function CancelSearch() {
    // 只有请求存在且处于未完成状态时才执行取消
    if (currentXhr && currentXhr.readyState !== 4) {
        currentXhr.abort();
        currentXhr = null;
    }
    HideSpinner();
    // 可选：如果需要取消后清空已加载的表格内容，打开下方注释
    // table.clear().draw();
}

核心注意点 #

• 全局变量currentXhr会始终存储最近一次发起的AJAX请求实例，避免取旧实例导致取消失效
• 取消前增加状态判断，避免请求完成后调用abort抛出控制台错误
• 如果你的业务场景需要支持多次重复发起搜索，无需修改逻辑，新请求发起时会自动覆盖currentXhr的值

内容的提问来源于stack exchange，提问作者Riley Christian