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 (3)
Hi
Can you try this? KTDatatable to re-read the table content by invalidating its internal state
<pre> function updateDatatable() { const datatableEl = document.querySelector("[data-kt-datatable='true']"); const tbody = datatableEl.querySelector('tbody'); // Add your new row idCounter += 1; tbody.insertAdjacentHTML("beforeend", ` <tr> <td>${idCounter}</td> <td>TEST_NAME_${idCounter}</td> </tr> `); // Get the datatable instance const datatable = KTDataTable.getInstance(datatableEl); // Force content invalidation by clearing the content checksum datatable.getState()._contentChecksum = null; // Reload the datatable datatable.reload(); } </pre>here is my simple demo code. but it doesn't work. what's wrong with my code?
<pre lang="html"> <!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/@keenthemes/ktui@1.0.21/dist/styles.min.css" 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="https://cdn.jsdelivr.net/npm/@keenthemes/ktui@1.0.21/dist/ktui.min.js"></script><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>
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();
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
