Can I use fetch api in jquery-datatables? - ajax

Question

I understand that you can use ajax to populate the datatable. But can you use fetch?
Because I have this normal table, filled dynamically using fetch api.
$(document).ready(function(){
fillTable();
})
//fetch api (AJAX) to fill table
fillTable = () => {
fetch('http://localhost:3000/home.json')
.then(response => response.json())
.then(data => {
let html = '';
for (i = 0; i < data.length; i++){
html += '<tr>'+
'<td class="tdUsername pv3 w-35 pr3 bb b--black-20">'+ data[i].username + '</td>'+
'<td class="tdPassword pv3 w-35 pr3 bb b--black-20">'+ data[i].password + '</td>'+
'<td class="pv3 w-30 pr3 bb b--black-20">'+
'<div class="btn-group" role="group" aria-label="Basic example">'+
'<a class="editButton f6 grow no-underline ba bw1 ph3 pv2 mb2 dib black pointer" data-toggle="modal">EDIT</a>'+
'<a class="deleteButton f6 grow no-underline ba bw1 ph3 pv2 mb2 dib black pointer" data-toggle="modal">DELETE</a>'+
'</div>'+
'</td>'+
'</tr>'
}
$('#tblBody').html(html);
})
.catch(err => console.log("ERROR!: ", err))
}
So I am wondering if I can use fetch-api instead of using this to fill the datatable.
//syntax copied from the website
$('#myTable').DataTable( {
ajax: '/api/myData'
} );

Answer 1

It is possible to use 'ajax' option as a function, see https://datatables.net/reference/option/ajax#function
As a function, making the Ajax call is left up to yourself allowing complete control of the Ajax request. Indeed, if desired, a method other than Ajax could be used to obtain the required data, such as Web storage or a Firebase database.
When the data has been obtained from the data source, the second parameter (callback here) should be called with a single parameter passed in - the data to use to draw the table.
Example:
$('#example').dataTable( {
"ajax": function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}
});

Answer 2

I was looking for this answer myself as I am trying to stay away from jquery as much as possible, but was unable to find an answer anywhere. I ultimately figured it out on my own and the implementation is not very different than using DataTable's suggested jquery ajax call.
var myTable = $('#myTable').DataTable({
ajax: async function (data, callback, settings) {
let response = await fetch("/api/v1/some/end/point", {headers: {Authorization: 'Bearer ' + sessionStorage.getItem("token")}});
if (response.ok) {
let msg = await response.json();
sessionStorage.setItem('token', msg.token);
console.table(msg.data);
delete msg['token'];
callback(msg);
} else {
console.log(response);
}
},
...... followed by the usual DataTable options

Answer 3

if someone is looking for an answer.
Yes, you can use fetch to populate datatable, here is an example.
fetchEndPointData(dc)
.then(aggregatedData => {
$('#table1').dataTable().api().rows.add(aggregatedData);
}).catch(error => {
// When fetch ends with a bad HTTP status, e.g. 404
console.log(error.message);
});
invoked method
async function fetchEndPointData(dc) {
const response = await fetch('/someEndPoint=' + dc);
const movies = await response.json();
return movies;
}
Note : the fetchEndPointData is returning a promise.
reference : https://dmitripavlutin.com/javascript-fetch-async-await/