Django Datatables with HTMX Refresh Causes to Lose Functionality

Question

I'm using Django with bootstrap datatables to display my data. I have it mostly working, but it seems that when I do a call back refresh with HTMX, all of the buttons break. I think what is happening is that a new table is being overlaid on top as the buttons still technically work, but it refers to the old data.

Raw table

Working filter

Filter breaking after refresh

As you can see, the table looks slightly different and the search status at the bottom says "showing 1 to 1 of 1 entries). So it works, but isn't updating the div anymore to only show applicable results like it used to.

This is how i'm refreshing the table

<table class='table table-bordered' id="alert-table" hx-get="{% url 'alert_list' %}" hx-trigger="every 15s" hx-swap="innerHTML">

JS of the datatable:

    <script>
        $(document).ready(function () {

            var table = $("#alert-table").DataTable({
                autoWidth: true,
                lengthChange: true,
                searching: true,
                ordering: false,
                columnDefs: [ {
                targets: 3,
                render: function ( data, type, row ) {
                    
                }
                } ],
                dom: 'lBrtip',
                buttons: [
                    {
                        // COPY
                        extend: 'copy',
                        text: '<i class="bi bi-files"></i>',
                        className: 'btn btn-secondary',
                        titleAttr: 'Copy'
                    },
                    {
                        // EXCEL
                        extend: 'excel',
                        text: '<i class="bi bi-file-earmark-spreadsheet"></i>',
                        className: 'btn btn-secondary',
                        titleAttr: 'Excel'
                    }                    
                ]
                
            })

            // // Enable Searchbox at top of page
            var newSearch = $('#alert-table').DataTable();
            $('#search').keyup(function() {
                console.log("test");
                newSearch.search($(this).val()).draw();
            });
      <script>

Update: I think I kind of got it working, but now it looks like this:

Answer 1

Without going deep into datatables code, it's likely the change in the DOM is affecting the filter function.

Try this as a fix:

//separate the search setup to be callable
function handleSearch() {
    // // Enable Searchbox at top of page
    var newSearch = $('#alert-table').DataTable();
    $('#search').keyup(function() {
        console.log("test");
        newSearch.search($(this).val()).draw();
    });
}

//Call the new function using appropriate handlers for doc load and htmx change.
//first document ready for pageload
$(document).ready(function () {
        var table = $("#alert-table").DataTable({
            autoWidth: true,
            lengthChange: true,
            searching: true,
            ordering: false,
            columnDefs: [ {
            targets: 3,
            render: function ( data, type, row ) {
                
            }
            } ],
            dom: 'lBrtip',
            buttons: [
                {
                    // COPY
                    extend: 'copy',
                    text: '<i class="bi bi-files"></i>',
                    className: 'btn btn-secondary',
                    titleAttr: 'Copy'
                },
                {
                    // EXCEL
                    extend: 'excel',
                    text: '<i class="bi bi-file-earmark-spreadsheet"></i>',
                    className: 'btn btn-secondary',
                    titleAttr: 'Excel'
                }                    
            ]
            
        })
    handleSearch()
});
//then use htmx.onload to run when htmx does its thing
htmx.onLoad(function() {
    handleSearch()
});

For more on getting HTMX to work with 3rd party scripts, try their docs