Datatables in Blazor: Dispose() doesn't work

erossini

Following a post on DataTables.net, successfully I added DataTables.net on my Blazor WebAssembly across the application. The problem I'm facing is when I change page. As you can see in the following image, for each page with DataTables.net I change, I still have the search bar from the previous page.

In the code of each page I added

public void Dispose()
{
    JSRuntime.InvokeAsync<bool>("DataTablesRemove", "#tableData");
}

DataTablesRemove is defined in the index.html

function DataTablesRemove(table) {
    $(document).ready(function () {
        $(table).DataTable().destroy();
        // Removes the datatable wrapper from the dom.
        var elem = document.querySelector(table + '_wrapper');
        elem.parentNode.removeChild(elem);
    });
}

How can I fix this issue?

erossini

I forgot to add at the top of the page

@implements IDisposable

allan

Does it work if you do:

function DataTablesRemove(table) {
  $.fn.dataTable
    .tables( { api: true } )
    .destroy(true);
}

At the moment you are running the function and then waiting for document ready. I don't know if Blazor fires that multiple times inside a single page does it?

Allan