I am using dataTables to represent a list of institutions. One of the columns in the table has button to check API status, so when a user clicks it will say if the API is active or inactive. I have this working but now I will like to make it an async event so when the page or the dataTable is loaded we get the status of the API after few seconds automatically, how can I achieve this as I am unable to find anything useful regarding this. Below is my code.
$.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,
});
}
});
Below is the event on button with button-status class click
$('.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>';
}
});
});
Here is the screenshot of the dataTable with the buttons for reference
