html - 在 dataTable 列中创建一个异步事件并根据响应呈现一个按钮

Question

我正在使用数据表来表示机构列表。表中的一列有检查 API 状态的按钮，因此当用户单击它时，它会显示 API 是事件的还是非事件的。我有这个工作，但现在我想让它成为一个异步事件，所以当页面或数据表加载时，我们会在几秒钟后自动获得 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 引用资料，您可能需要使用一个回调选项:初始化完成 https://datatables.net/reference/option/initComplete

It can often be useful to know when your table has fully beeninitialised, data loaded and drawn, particularly when using an ajaxdata source. In such a case, the table will complete its initial runbefore the data has been loaded (Ajax is asynchronous after all!) sothis callback is provided to let you know when the data is fullyloaded

所以您可以将它作为一个选项添加到您对“getInstitution”调用的“SUCCESS”响应中......这里的某个地方:

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