Search section of JQuery Datatable shows on all pages in Blazor Server App.

Question

Search section of JQuery Datatable shows on all pages in Blazor Server App.

Ronald Rex 571

The problem I'm facing is when I change page from page with JQuery Datatable to another page, I still have the search bar at top and pagination bar at bottom from the Datatable on the newly displayed Page. When I refresh page it goes away. Do I need some Javascript function to dispose of DataTable in the DOM? Where do you put javascript code in a Blazor Server App? Thanks !!!!

Xinran Shen - MSFT 1,281 Reputation points Microsoft Vendor

2022-09-05T01:43:13.847+00:00

Hi, @Ronald Rex , Can you explain more details about:
I still have the search bar at top and pagination bar at bottom from the Datatable on the newly displayed Page. When I refresh page it goes away.?
When you navigate to another page, You don't want to show the data which searched in the original Page? You can refer to this Docs about how to use JS code in Blazor.
Ronald Rex 571 Reputation points

2022-09-05T18:29:05.69+00:00

Do you see how the header and footer are showing at the top of this Razor Page from a previous Datatable ?
Xinran Shen - MSFT 1,281 Reputation points Microsoft Vendor

2022-09-06T01:30:17.747+00:00

Yes, I can see two Search bar and show xx entries in your razor page, So when you refresh the page, The Search bar and show xx entries above is gone? Please provide the relevant code for us to test.

Ronald Rex 571

Razor Page

protected override async Task OnAfterRenderAsync(bool firstRender)
{

    if (firstRender)  
    {  
        await JS.InvokeAsync<IJSObjectReference>("DataTablesAdd", "#table_id");  

    }  
}  

public void Dispose()  
{  
    JS.InvokeAsync<IJSObjectReference>("DataTablesRemove", "#table_id");  
}

_Layout.cshtml

    function DataTablesAdd(table) {  
        $(function(){  
            $(table).DataTable();  
        });  

        }  
        

    function DataTablesRemove(table) {  
         $(function(){  
            $(table).DataTable().destroy();  
         });  
        }  

</script>

Xinran Shen - MSFT 1,281 Reputation points Microsoft Vendor

2022-09-07T06:08:22.107+00:00

Sorry, The code can't help me to solve the issue, You can create a minimal simple project with the same issue and upload it to github then provide the link.
Ronald Rex 571 Reputation points

2022-09-07T16:47:49.207+00:00

I think its just a matter of the Datatable not being disposed of or removed from the DOM. I am just trying to figure out how this is resolved. Thanks !!!

Xinran Shen - MSFT 1,281 Reputation points Microsoft Vendor

2022-09-05T01:43:13.847+00:00

Hi, @Ronald Rex , Can you explain more details about:
I still have the search bar at top and pagination bar at bottom from the Datatable on the newly displayed Page. When I refresh page it goes away.?
When you navigate to another page, You don't want to show the data which searched in the original Page? You can refer to this Docs about how to use JS code in Blazor.
Ronald Rex 571 Reputation points

2022-09-05T18:29:05.69+00:00

Do you see how the header and footer are showing at the top of this Razor Page from a previous Datatable ?
Xinran Shen - MSFT 1,281 Reputation points Microsoft Vendor

2022-09-06T01:30:17.747+00:00

Yes, I can see two Search bar and show xx entries in your razor page, So when you refresh the page, The Search bar and show xx entries above is gone? Please provide the relevant code for us to test.
Ronald Rex 571 Reputation points

2022-09-06T15:56:22.32+00:00

Razor Page

protected override async Task OnAfterRenderAsync(bool firstRender)
{

if (firstRender) { await JS.InvokeAsync<IJSObjectReference>("DataTablesAdd", "#table_id"); } } public void Dispose() { JS.InvokeAsync<IJSObjectReference>("DataTablesRemove", "#table_id"); }

_Layout.cshtml

<script>

function DataTablesAdd(table) { $(function(){ $(table).DataTable(); }); } function DataTablesRemove(table) { $(function(){ $(table).DataTable().destroy(); }); } </script>
Xinran Shen - MSFT 1,281 Reputation points Microsoft Vendor

2022-09-07T06:08:22.107+00:00

Sorry, The code can't help me to solve the issue, You can create a minimal simple project with the same issue and upload it to github then provide the link.
Ronald Rex 571 Reputation points

2022-09-07T16:47:49.207+00:00

I think its just a matter of the Datatable not being disposed of or removed from the DOM. I am just trying to figure out how this is resolved. Thanks !!!

Search section of JQuery Datatable shows on all pages in Blazor Server App.

Activity