New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
Refresh KTDatatable with new Data
I'm using KTDatatable for reference "https://ktui.io/docs/datatable#basic-usage".
But, I don't know how to refresh data in KTDatatable by local information.
Can I refresh KTDatatable with JSON or dynamic rendered local HTML?
Replies (2)
here is my simple demo code. but it doesn't work. what's wrong with my code?
<!DOCTYPE html>
<html>
<head>
<link href=" rel="stylesheet">
</head>
<body>
<div
class="kt-card-table"
data-kt-datatable="true"
data-kt-datatable-page-size="5"
data-kt-datatable-state-save="true"
>
<div class="kt-table-wrapper kt-scrollable">
<table class="kt-table" data-kt-datatable-table="true" >
<th>
<thead>
<tr>
<th data-kt-datatable-column="id">
<span class="kt-table-col-label">ID</span>
<span class="kt-table-col-sort"></span>
</th>
<th data-kt-datatable-column="name">
<span class="kt-table-col-label">NAME</span>
<span class="kt-table-col-sort"></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>TEST_NAME_1</td>
</tr>
</tbody>
</th>
</table>
</div>
<!--begin:pagination-->
<div class="kt-datatable-toolbar">
<div class="kt-datatable-length">
Show<select class="kt-select kt-select-sm w-16" name="perpage"
data-kt-datatable-size="true"></select>per
page
</div>
<div class="kt-datatable-info">
<span data-kt-datatable-info="true"></span>
<div class="kt-datatable-pagination" data-kt-datatable-pagination="true">
</div>
</div>
</div>
<!--end:pagination-->
</div>
<button class="kt-btn" onclick="updateDatatable()">Update Button</button>
<script src="
<script>
document.addEventListener("DOMContentLoaded", function () {
initDatatable();
});
function initDatatable() {
KTDataTable.init();
KTDataTable.createInstances();
const datatableEl = document.querySelector("#kt-datatable-div");
const datatable = KTDataTable.getInstance(datatableEl);
datatable.reload();
console.log("initialized");
console.log(datatable.getState()); // originalData is empty
}
let idCounter = 1;
function updateDatatable() {
const datatableEl = document.querySelector("#kt-datatable-div");
const b = datatableEl.getElementsByTagName("tbody")[0];
idCounter += 1;
b.insertAdjacentHTML("beforeend", `<tr>
<td>${idCounter}</td>
<td>TEST_NAME_${idCounter}</td></tr>`);
const datatable = KTDataTable.getInstance(datatableEl);
datatable.reload();
console.log(datatable.getState()); // also originalData is empty
}
</script>
</body>
</html>
Hi
KTDatatable provides several methods to refresh data with local information. Here are the main approaches.
For local data, you can use the reload() method which will re-fetch data from the DOM:
// Get the datatable instance
const tableElement = document.querySelector("#your_table_id");
const dataTable = KTDataTable.getInstance(tableElement);
// Update the table HTML with new data first
// Then reload the datatable
dataTable.reload();
