Datatable metronic 9
Hello,
I have just upgraded to metronic 9, which is superb and very pleasant to implement, but I have a problem with datatable. I need to modify the contents of the datatable in ajax according to date ranges. Unfortunately, if I empty tbody and inject the new table rows, the KTDataTable content doesn't update. I don't see in the documentation any possibility of destroying the KTDataTable element and recreating it, or of deleting the present rows and adding new ones.
I use the native JS/HTML version of metronic.
Here's a code snippet about my attempt to update the data :
const datatableEl = document.querySelector("#dataTable");
let datatable = null;
const options = {
pageSize: 10
};
function load(start, end) {
$("#dataTable tbody").html("") /* Remove all rows */
$.ajax({
url : "{{ path("XXX") }}",
type : "POST",
dataType: "json",
data: {
start: start.format("YYYY-MM-DD"),
end: end.format("YYYY-MM-DD")
},
success: function (data) {
$("#dataTable tbody").html(data.content); /* Inject new rows */
datatable = new KTDataTable(datatableEl, options); /* Trying to update datatable */
}
})
}Thank you in advance for your help !
Replies (4)
Hi
You can try to replace the existing datatable internal data and reload the datatable. We will add the API function to update the existing internally in future updates.
const datatable = new KTDataTable(datatableEl, options); // init datatable once
// use existing datatable instance
console.log(datatable._config._state.originalData);
datatable._config._state.originalData = /* replace with you data object here */
datatable.reload();Hello,data.content contains the html format of the table body, i.e. <tr><td>XXX</td></tr>.
On the first initialization, everything is fine, the table is built and works correctly. However, if I need to display new data (for example, rows from the previous month) without reloading the page, it stops working. The datatable variable is empty.
I can adapt the value returned by the API and have the data in object format if necessary. But I can't find a solution to replace the existing data in the table. I've tried overwriting the value of _data (datatable._data) without success.
Hi Loïc B.
You need to build the HTML table and initialize the KTDataTable. May I know how you inject the table row here?
$("#dataTable tbody").html(data.content); /* Inject new rows */data.content seems to be the raw data from your API as JSON object.
And another question, the method search(query: string | object) is present, but how to make a search of a query only in one column ?
For exemple, i want to search "Charles" only in column "lastname" and not in the column "firstname".
Thanks !
