DataTable列实现异步加载后自动检测API状态并渲染按钮的方案

你可以通过DataTable的initComplete初始化完成回调结合公共检测函数实现需求，具体修改如下：

步骤1：抽离公共API检测函数 #

将原来点击事件中的检测逻辑抽为独立公共函数，供自动检测和手动点击复用：

// 公共检测机构API状态函数
function checkApiStatus(instituteId) {
    $('#spinner' + instituteId).removeClass('hidden');
    $.ajax({
        url: '/getInstitutionStatus/' + instituteId,
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            $('#spinner' + instituteId).hide();
            const btn = document.getElementById('checkApiStatus' + instituteId);
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-success');
            btn.innerText = locale === 'fr' ? frLocaleDataTable['ACTIVE'] : 'Active';
        }, 
        error: function (e) {
            $('#spinner' + instituteId).hide();
            const btn = document.getElementById('checkApiStatus' + instituteId);
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-danger');
            btn.innerText = locale === 'fr' ? frLocaleDataTable['INACTIVE'] : 'Inactive';
            $("#overlay").fadeOut(2000);
            if(document.getElementById('errorDiv'  + instituteId)) {
                document.getElementById('errorDiv'  + instituteId).innerHTML = '<p class="p-3">' + e.message + '</p>';
            }
        }
    });
}

步骤2：简化按钮点击事件 #

改用事件委托绑定点击事件，兼容分页、搜索后新增的按钮：

$(document).on('click', '.button-status', function (e){
    e.preventDefault();
    const instituteId = $(this).data('instituteid');
    checkApiStatus(instituteId);
});

步骤3：在DataTable配置中添加初始化完成回调 #

在原有的DataTable初始化配置项中新增initComplete参数，实现加载完成后延时自动检测：

var institutionsTable = $('#institutionsTable').DataTable({
    // 原有其他配置保持不变：responsive、data、language、columns、columnDefs等全部保留
    responsive: true,
    data: response.data,
    // ... 省略原有其他配置项 ...
    bDestroy: true,
    // 新增以下初始化完成回调
    initComplete: function (settings, json) {
        const table = this.api();
        // 延时3秒后启动自动检测，时长可自行调整
        setTimeout(() => {
            // 遍历所有行的机构ID，逐个触发检测
            table.rows().data().each(row => {
                const instituteId = row.id_institutions;
                checkApiStatus(instituteId);
                // 若机构数量较多，可取消下方注释添加请求间隔，避免并发请求过多，单位为毫秒
                // await new Promise(resolve => setTimeout(resolve, 200));
            });
        }, 3000);
    }
});

可选调整说明 #

• 如果只需要检测当前页的机构状态，可把table.rows().data()修改为table.rows({page:'current'}).data()
• 自动检测的延时时长可通过修改setTimeout的第二个参数自定义，单位为毫秒

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