Привіт, друзі!
Як у вас справи? Сподіваюся, все добре.
Сьогодні я напишу пост про використання DataTable для створення таблиці з HTTP-запиту до API.
Якщо ви не знайомі з такими термінами, як HTTP і API, не хвилюйтеся, оскільки це не є основною метою цього посту.
У цьому прикладі є кнопка, при натисканні на яку відправляється запит до API і перевіряється, чи повернувся статус 200 OK, тобто чи був запит виконаний успішно.
Після цього відбувається цикл по рядках таблиці.
І після того, як HTML рядків (TR) буде створено, код буде додано до TBODY (tbody_tabela).
$(“#btnProdutosSubnivel”).click(function () {
$.ajax({
url: criarURL(‘Controller’, ‘Metodo’),
type: ‘GET’,
dataType: ‘JSON’,
async: true,
cache: false,
success: function (response) {table = ‘’;
if (response.success) {
if (!DataTable.isDataTable(‘#tableProdutoSubnivel’)) {
$(‘#tableProdutoSubnivel’).DataTable({
pageLength: 10,
paging: true,
autoFill: true,
language: {
url: ‘//cdn.datatables.net/plug-ins/2.1.8/i18n/pt-BR.json’,
},
columnDefs: [{
orderable: false,
render: DataTable.render.select(),
className: ‘no-sort’,
targets: 0
}],
retrieve: true,
ordering: true,
select: {
style: ‘’,
}
});
$.each(response.result, function (index, element) {
table += ‘’
table += ‘’;
table += ‘’ + element.produto + ‘’;
table += ‘’ + element.cor + ‘’;
table += ‘’ + element.tamanho + ‘’;
table += ‘’ + element.quantidade + ‘’;
table += ‘’ + element.unidade + ‘’;
table += ‘’ + element.peso + ‘’;
table += ‘’ + element.unitario + ‘’;
table += ‘’ + element.total + ‘’;
table += ‘’
});
$(‘#tbody_tabela’).html(table);
}
else
{
}
}
},
error: function (e) {
KTApp.unblockPage();
console.log(e);
alert(e);
}
});
});
На цьому все!
Обіймаю!
Написано: Gabriel Peterossi Maricato
Перекладено з: Criar uma tabela Dinamica com DataTable