How to refresh data of a KTDataTable html table
Hi,
I'm using ktDataTable html table, i need could refresh de data in the table. To do this i´m deleting the html inside tbody on my page using javascript and recreating all the rows of my table. After i´m trying of execute the function of ktdatatable destroy and reload, but the table refresh the data with the first group of html rows loaded at first time. I'm trying too delete de KTDatatableHtmlTableDemo variable and instance again this variable calling the init function. The table is rendered but with a lot of errors in page console and stange behaviors.
Can you help me with this. Thank you very much.
The code:
//instance principal variable
KTDatatableHtmlTableDemo = function () {
// Private functions
// demo initializer
var demo = function () {
var el = $('#tblHistAP');
var datatable = el.KTDatatable({
data: {
saveState: { cookie: false },
},
search: {
input: $('#kt_datatable_search_query'),
key: 'generalSearch',
},
layout: {
class: 'datatable-bordered',
spinner: { message: 'Cargando...' },
},
pagination: true,
columns: [],
});
//$('#kt_datatable_search_status, #kt_datatable_search_type').selectpicker();
};
return {
// Public functions
init: function () {
// init dmeo
demo();
},
};
}();
//initializing the ktdatatable
cargarDatos("",""); //this function create the html rows with the data of the table
KTDatatableHtmlTableDemo.init();
//Refreshing the data
$("#btnRefresh").click(function(){
var d1=$("#date").val();
var d2=$("#date1").val();
if(d1!=="" && d2!==""){
KTApp.block('#Cardbl', {
overlayColor: '#000000',
state: 'danger',
message: 'Actualizando Datos...'
});
//datatable.destroy();//I TRIED WITH THIS BUT DOESN'T WORK
var rows = [];
rows = rows.join("");
rows = rows.toString();
$(".datatable-body")[0].innerHTML = rows; //DELETING HTML ROWS TABLE
cargarDatos(d1,d2); //LOADING NEW ROWS OF TABLE IN HTML OF PAGE
//datatable.load(); //I TRIED WITH THIS BUT DOESN'T WORK
delete KTDatatableHtmlTableDemo; // DELETING THE PRINCIPAL VARIABLE
initktable(); //DECLARE AGAIN THE PRINCIPAL VARIABLE
KTDatatableHtmlTableDemo.init(); //INITILIZING AGAIN
setTimeout(function() {
KTApp.unblock('#Cardbl');
}, 1000);
}
else{
alert("Los campos de fecha no pueden estar vacios!");
}
});
Replies (5)
Hi,
May I know which Metronic version are you using ? KTDatatable was available in Metronic v7, the older version of Metronic. Could you confirm this ? If you are using Metronic v7 HTML version's KTDatatable plugin you can refer to its documentation here.
Regards.
I'm using metronic_v7.2.9. HTML.
Hi,
If you are using the `ktDataTable` with a local data source, there are a couple of workarounds you can try to refresh the data in the table.
1. Destroy and Reinitialize the DataTable:
You can try to destroy the datatable and then reinitialize it with the updated data. Here's how you can do it:
// Get the datatable instance
var datatable = $(".datatable").KTDatatable({/*...*/});
// Destroy the datatable
datatable.KTDatatable("destroy");
// Update the data in your datatable object
// For example, if you have a new data array, you can do:
var newDataArray = [...]; // Your updated data array
datatable.options.data.source = newDataArray;
// Reinitialize the datatable using the same options
datatable = $(".datatable").KTDatatable(datatable.options);2. Update Data Directly in the DataTable:
You can also try modifying the existing data directly in the datatable object and then reload the table. Here's an example:
// Get the datatable instance
var datatable = $(".datatable").KTDatatable({/*...*/});
// Access the original data array
var dataArray = datatable.originalDataSet;
// Modify the dataArray with your updated data
// For example, you can append new data to it like this:
var newData = {...}; // Your new data object
dataArray.push(newData);
// Reload the datatable
datatable.reload();Please note that these workarounds are specifically for local data sources. If you are using a remote data source, you should update the data in your backend service and then reload the table using the `datatable.reload()` method.
Try these methods and see if they help you to refresh the data in your `ktDataTable`. If you encounter any issues or need further assistance, feel free to ask.
Thank You very much. The first solution work for me.
You're welcome! I'm glad to hear that the solution worked for you. If you have any more questions or need further assistance in the future, feel free to ask. Have a great day!
