Can you use HTMX with datatables?

I have this in my datatables:

columns: [
            {
               data: 'product.item_code',
               className: 'text-start align-middle',
               render: function (data, type, row) {
                  return '<a href="#" class="btn btn-primary" hx-post="/app/function/" hx-trigger="click" hx-target="#details" hx-swap="beforeend">' + row.product.item_code + '</a>'
               }
            }

I am not able to get into the hx-post function when the anchor tag is in the datatable but works if it's in a regular HTML page

The key is to use htmx.process https://htmx.org/api/#process to give life to your htmx code defined that way.

Here's the blog that I found that explains about this, also using Django, DataTables, and HTMX, addressing exactly your situation: https://til.jacklinke.com/using-htmx-and-server-side-datatables-net-together-in-a-django-project

The key in the blog is to use htmx.process in the DataTable initComplete callback.

   ...
   "initComplete": function( settings, json ) {
      htmx.process('#personTable');
   },
   ...
Back to Top