在dataTable列内创建异步事件，并根据响应呈现按钮

Question

我正在使用dataTables来表示一个机构的列表。表中的一个列有检查API状态的按钮，所以当用户单击时，它会显示API是活动的还是非活动的。我已经完成了这个工作，但是现在我想让它成为一个异步事件，所以当页面或dataTable加载时，我们会在几秒钟后自动获得API的状态，我如何实现这一点，因为我找不到任何有用的东西。下面是我的密码。

 $.ajax({
    url: '/getInstitutionsList',
    type: 'GET',
    dataType: 'JSON',
    success: function(response) {
        var institutionsTable = $('#institutionsTable').DataTable({
            responsive: true,
            data: response.data,
            language: dataTableLang,
            columns: [
                { data: null, defaultContent: '' },
                { data: 'description' },
                { data: 'email' },
                { data: 'phone' },

                {
                    data: null,
                    render: function (data, type, row) {
                        
                        if (locale === 'fr') {
                            return "<button class=\"btn button-status btn-primary btn-sm ml-4 mb-2\"  id= 'checkApiStatus" + data.id_institutions + "' data-instituteid='"+ data.id_institutions +"'> "+ frLocaleDataTable['CHECK API STATUS'] + " <i id='spinner" + data.id_institutions +"' class=\"fa fa-spinner fa-spin hidden\"></i></button>"
                        } else {
                            return "<button class=\"btn button-status btn-primary btn-sm ml-4 mb-2\"  id= 'checkApiStatus" + data.id_institutions + "' data-instituteid='"+ data.id_institutions +"'>Check API Status<i id='spinner" + data.id_institutions +"' class=\"fa fa-spinner fa-spin hidden\"></i></button>"
                        }

                    }

                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return " <button class=\"button-expire btn-sm ml-4 mb-2\" style=\"border:none;\" data-instituteid='"+ data.id_institutions +"'><i class=\"fa fa-clock\"></i></button>"
                    }
                },
                { data: 'id_institutions' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return " <button class=\"button-manage btn-sm ml-4 mb-2\" style=\"border:none;\" data-instituteid='"+ data.id_institutions +"'><i class=\"fa fa-pencil-alt\"></i></button>"
                    }
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return " <button class=\"button-delete btn-sm ml-4 mb-2\" style=\"border:none;\" data-instituteid='"+ data.id_institutions +"'><i class=\"fa fa-trash\"></i></button>"
                    }
                }
            ],
            columnDefs: [
                {
                    targets: [6],
                    visible: false,
                    searchable: false
                },
                {
                    targets: [0],
                    checkboxes: {
                        selectRow: true
                    }
                }

            ],
            select: {
                style: 'multi'
            },
            pageLength: 5,
            order: [[ 1, 'asc' ]],
            bDestroy: true,

        });

    }

});

下面是按钮状态类单击的事件按钮。

 $('.button-status').click(function (e){
        e.preventDefault();
        var instituteId = $(this).data('instituteid');
        $('#spinner' + instituteId).removeClass('hidden');
        $.ajax({
            url: '/getInstitutionStatus/' + instituteId,
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                $('#spinner' + instituteId).hide();
                document.getElementById('checkApiStatus' + instituteId).classList.remove('btn-primary');
                document.getElementById('checkApiStatus'  + instituteId).classList.add('btn-success');
                document.getElementById('checkApiStatus'  + instituteId).innerText = 'Active';


            }, error: function (e) {
                $('#spinner' + instituteId).hide();
                document.getElementById('checkApiStatus'  + instituteId).classList.remove('btn-primary');
                document.getElementById('checkApiStatus'  + instituteId).classList.add('btn-danger');
                document.getElementById('checkApiStatus'  + instituteId).innerText = 'Inactive';
                $("#overlay").fadeOut(2000);
                document.getElementById('errorDiv'  + instituteId).innerHTML = '<p class="p-3">' + e.message + '</p>';
            }
        });

    });

下面是带有按钮的dataTable屏幕截图，以供参考

​

Answer 1

根据DataTables引用，您可能需要使用一个回调选项：initComplete https://datatables.net/reference/option/initComplete

知道您的表何时已完全初始化、加载和绘制，尤其是在使用ajax数据源时，这通常是有用的。在这种情况下，表将在加载数据之前完成其初始运行(Ajax毕竟是异步的！)因此，提供此回调是为了让您知道数据何时已完全加载。

因此，您可以将它添加到您的“成功”响应“getInstitution”呼叫中.在这里的某处：

var institutionsTable = $('#institutionsTable').DataTable({
                responsive: true,
                data: response.data,
                language: dataTableLang,
                initComplete: function(settings, json) {...}