Reload Content DataTable Client - side #98
Description
Hi, I'm configuring a table locally and I want to be able to update the content after initialization using a helper function. Is it possible to use .reload() on client-side tables? I've attached a diagram of how I have configured a global function where I initialize the table.
//DATATABLE CLIENT - SIDE
window.tableLocal = window.tableLocal || {};
function configTable(table) {
const Element = document.getElementById(table);
//LIMPIAR INSTANCIA ANTERIOR SI EXISTE
if (Element.hasAttribute('data-kt-datatable-initialized')) {
if (
typeof KTDataTable !== 'undefined' &&
typeof KTDataTable.getInstance === 'function'
) {
var oldInstance = KTDataTable.getInstance(Element);
if (oldInstance && typeof oldInstance.dispose === 'function') {
oldInstance.dispose();
}
}
Element.removeAttribute('data-kt-datatable-initialized');
if (Element.instance) {
delete Element.instance;
}
}
const options = {
infoEmpty: 'No hay datos disponibles',
loading: {
template: `
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div class="kt-datatable-loading">
<svg class="animate-spin -ml-1 h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
{content}
</div>
</div>
`,
content: 'Cargando Datos...',
},
info: 'Mostrando {start} a {end} de {total} registros',
pageSize: 10,
pageSizes: [5, 10, 30, 50, 100],
};
const newtable = new KTDataTable(Element, options);
window.tableLocal[table] = newtable;
}
function reloadTable(table){
window.tableLocal[table].reload() // is it possible?
}