Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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 !


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


KTDataTable won’t update if you just replace the tbody because it keeps its own internal data. You need to destroy the instance before injecting new rows and then reinitialize it.

if (datatable) {
datatable.destroy();
}

$("#dataTable tbody").html(data.content);

datatable = new KTDataTable(datatableEl, options);

Alternatively, use a JSON data source and call reload instead of modifying the DOM directly. This avoids state issues and keeps updates clean and consistent, similar to how users expect smooth performance on platforms like eppicinemaappbrasil.com.



KTDataTable doesn’t update when you just replace tbody because it manages its own internal state. You need to destroy the instance before injecting new rows and then reinitialize it, or switch to a data source based approach and call reload instead of manipulating the DOM directly.

if (datatable) {
datatable.destroy();
}

$("#dataTable tbody").html(data.content);

datatable = new KTDataTable(datatableEl, options);

Using the proper method avoids state issues and keeps everything working smoothly. Small handling details like this matter a lot for stable performance, just like users expect consistency when exploring platforms such as desicinemaapk.com.pk.



You can’t update KTDataTable by just replacing the tbody HTML. It keeps its own internal state. You need to either destroy and reinitialize it, or update via its data source.
Fix:
if (datatable) { datatable.destroy();}$("#dataTable tbody").html(data.content);datatable = new KTDataTable(datatableEl, options);
Better way: use a data source (JSON) and call reload instead of manipulating DOM directly.
Small setup details like this matter a lot for smooth behavior, similar to how users expect stable performance on platforms like cinemaappbrasil.com.



Fix (best):

if (datatable) {
datatable.destroy();
}

$('#datatable tbody').html(data.content);

datatable = new KTDataTable(datatableEl, options);

Better approach (no destroy):
Update the data source (JSON) and call reload instead of replacing HTML. This keeps things smoother and avoids breaking the internal state, just like users expect a seamless and uninterrupted experience when accessing high quality streaming platforms like ciinemaapk.com.br



geometry dash 3d should be your first choice to pass the time.



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 !


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(