Могу ли я использовать fetch api в jquery-datatables?
Я понимаю, что вы можете использовать ajax для заполнения данных. Но можно ли использовать выборку? Потому что у меня есть эта обычная таблица, динамически заполняемая с помощью 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.info("ERROR!: ", err))
}
Поэтому мне интересно, могу ли я использовать fetch-api вместо этого для заполнения таблицы данных.
//syntax copied from the website
$('#myTable').DataTable( {
ajax: '/api/myData'
} );
Ответы 3
Можно использовать параметр ajax как функцию, см. 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').dataTable( {
"ajax": function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}
});
если кто-то ищет ответ.
Да, вы можете использовать fetch для заполнения datatable, вот пример.
fetchEndPointData(dc)
.then(aggregatedData => {
$('#table1').dataTable().api().rows.add(aggregatedData);
}).catch(error => {
// When fetch ends with a bad HTTP status, e.g. 404
console.info(error.message);
});
вызванный метод
async function fetchEndPointData(dc) {
const response = await fetch('/someEndPoint=' + dc);
const movies = await response.json();
return movies;
}
Примечание: fetchEndPointData возвращает обещание.
ссылка: https://dmitripavlutin.com/javascript-fetch-async-await/
Я сам искал этот ответ, так как стараюсь держаться подальше от jquery, насколько это возможно, но нигде не смог найти ответ. В конечном итоге я понял это самостоятельно, и реализация не сильно отличается от использования предложенного DataTable вызова jquery ajax.
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.info(response);
}
},
...... followed by the usual DataTable options