Blazor 中的数据表：Dispose() 不起作用

Question

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?

Answer 1

You have to add @implements IDisposable to the top of your page/component.

Otherwise Dispose() is just a method that won't be called.