0
421
ViewsCreating an async event inside a dataTable column and rendering a button according to response
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
1 answers
Answer question0
According to DataTables reference there is a callback option you may want to use: initComplete https://datatables.net/reference/option/initComplete
It can often be useful to know when your table has fully been initialised, data loaded and drawn, particularly when using an ajax data source. In such a case, the table will complete its initial run before the data has been loaded (Ajax is asynchronous after all!) so this callback is provided to let you know when the data is fully loaded
So you may add it as an option to your 'SUCCESS' response for 'getInstitution' call... somewhere here:
var institutionsTable = $('#institutionsTable').DataTable({
responsive: true,
data: response.data,
language: dataTableLang,
initComplete: function(settings, json) {...}