DataTable not removed between pages

[TheCamel]

Hi, From the sample,, I try to replace static table with dynamic one from https://datatables.net/examples/data_sources/server_side.html

I call an init in javascript from button clic and it works well.....but when i change to other pages the header stay there.

@page "/logview" @using Microsoft.AspNetCore.Blazor.Browser.Interop @inject HttpClient Http

Update heading

@if (logData == null) {

Loading...

} else {

@foreach (var forecast in logData) { }

Date	Type	Application	LogID	Host	Ceb	Method	Content	Exception
@forecast.DateTime.ToShortDateString()	@forecast.Type	@forecast.ApplicationID	@forecast.LogID	@forecast.Host	@forecast.CebID	@forecast.Method	@forecast.Content	@forecast.Exception

}

@functions { IEnumerable logData;

protected override async Task OnInitAsync() { logData = await Http.GetJsonAsync<IEnumerable>("http://localhost/Trace.Lib.Web.Api/All"); } void UpdateHeading(UIMouseEventArgs e) { RegisteredFunction.Invoke("LoadTable"); } }

in index?html

Blazor.registerFunction( 'LoadTable', () => { console.dir("test ok"); $('#example').DataTable({ "scrollX": true, "scrollY": 600, "scrollCollapse": true, "paging": false }); });

[SteveSandersonMS]

I expect the DataTables library is mutating the DOM directly outside a single element.

Blazor is like other SPA frameworks in that it requires you not to mutate the DOM directly. Blazor actually will handle it OK as long as the mutation is only inside a DOM element that contains no other Blazor-controlled content. But if DataTables injects additional content into the DOM in arbitrary places, Blazor has no way to know it's even there to remove it later (which is the same as you'd find with, for example, React).