0
423
VistasCrear un evento asíncrono dentro de una columna de tabla de datos y representar un botón según la respuesta
Estoy usando tablas de datos para representar una lista de instituciones. Una de las columnas de la tabla tiene un botón para verificar el estado de la API, por lo que cuando un usuario haga clic, dirá si la API está activa o inactiva. Tengo esto funcionando, pero ahora me gustaría convertirlo en un evento asíncrono, de modo que cuando se cargue la página o la tabla de datos, obtengamos el estado de la API después de unos segundos automáticamente, ¿cómo puedo lograr esto si no puedo encontrar nada útil con respecto a esta. A continuación se muestra mi código.
$.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, }); } });A continuación se muestra el evento en el botón con clic de clase de estado de botón
$('.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>'; } }); }); Aquí está la captura de pantalla de la tabla de datos con los botones como referencia 
1 Respuestas
Responde la pregunta0
De acuerdo con la referencia de DataTables, hay una opción de devolución de llamada que puede usar: initComplete https://datatables.net/reference/option/initComplete
A menudo puede ser útil saber cuándo la tabla se ha inicializado por completo, los datos se han cargado y se han extraído, especialmente cuando se utiliza una fuente de datos ajax. En tal caso, la tabla completará su ejecución inicial antes de que se carguen los datos (¡Después de todo, Ajax es asíncrono!), por lo que se proporciona esta devolución de llamada para informarle cuando los datos estén completamente cargados.
Por lo tanto, puede agregarlo como una opción a su respuesta 'ÉXITO' para la llamada 'getInstitution'... en algún lugar aquí:
var institutionsTable = $('#institutionsTable').DataTable({ responsive: true, data: response.data, language: dataTableLang, initComplete: function(settings, json) {...}