How to prevent datatable search and pagination rows from repeating when pressing previous or forward

Sabaabdoulaye2

I am experiencing an issue with JQuery Datatables. Indeed, I am working on a django and Htmx project that has a base template. Inside of it, I initialize datatables like this:

$(document).ready(function() {
    $('#datatable').DataTable({

    });
})

Now, given that I am using HTMX, I have a #main-content id on an html element where I replace the content that is returned when Htmx issues an Hx-get request. Each time a request is made, I have to reinitialize the table in the returned template inside a <script><script/> tag using the same code as above and everything works perfectly fine.

However, when I press the previous or next browser buttons, the datatable search and pagination rows get repetead multiple times, when there is data in my table, but it doesn't when there is no data. Thank you for helping me.

I've tried to destroy the table using the destroy() method inn Javascript, but I still had the same issue.

kthorngren

Htmx issues an Hx-get request

I'm not familair with HTMX but it sounds like the HTML table is being updated by HTMX. If this is the case then Datatables won't know about these updates which means it hasn't updated its data cache when the changes are made. See this FAQ.

Please post a link to your page or a test case replicating the issues so we can take a look to offer suggestions.

Kevin