Jquery datatable does not work on my blazor project

See more:

jQuery

Razor

jQuery-UI

Blazor

When I run the Blazor project, the jquery table does not work at all, but when I use the following code in MainLayot.razor:

protected override async Task OnAfterRenderAsync(bool firstRender)
{ if (firstRender)
{

await JSRuntime.InvokeAsync<ijsobjectreference>("import",
"/assets/js/pages/tables/jquery-datatable.js");
}
}
it only works on the first page and does not work on other pages. So when I refresh the next pages in the browser, I see that the jquery table works properly I want the jquery table to work properly on all pages when running the program What should I do?

What I have tried:

When I run the Blazor project, the jquery table does not work at all, but when I use the following code in MainLayot.razor:

protected override async Task OnAfterRenderAsync(bool firstRender) 
    { if (firstRender) 
        {

            await JSRuntime.InvokeAsync<IJSObjectReference>("import", 
             "/assets/js/pages/tables/jquery-datatable.js");
         }
     }
it only works on the first page and does not work on other pages. So when I refresh the next pages in the browser, I see that the jquery table works properly I want the jquery table to work properly on all pages when running the program What should I do?