Showing Datatable in Multiple tabs in BLazor WASM
Showing Datatable in Multiple tabs in BLazor WASM
sai_T
Posts: 1Questions: 1Answers: 0
Hi All,
I have a custom tab controller with tab page(Dynamic) and I want to display a data table for each tab. Please find the code below.
function AddDataTables(table) {
$(document).ready(function () {
$('table.display').DataTable({
"scrollX": true,
responsive: true
});
});
}
function RemoveDataTables(table) {
$(document).ready(function () {
$(table).DataTable().destroy();
});
}
Following code is in Tab controller component:
@inject IJSRuntime JSRuntime
<CascadingValue Value="this">
<div class="tabs hidden md:flex" role="group">
@foreach (TabPage tabPage in Pages)
{
<div class="capitalize @GetButtonClass(tabPage)"
@onclick=@(() => ActivatePage(tabPage))>
<h2 class="text-sm">@tabPage.Text</h2>
</div>
}
</div>
<div class="bg-white" @onloadstart="TestLoadstart" @onloadend="TestLoadEnd">
@ChildContent
</div>
</CascadingValue>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
public TabPage ActivePage { get; set; }
List<TabPage> Pages = new List<TabPage>();
internal void AddPage(TabPage tabPage)
{
Pages.Add(tabPage);
if (Pages.Count == 1)
{
if(!String.IsNullOrEmpty(tabPage.DataTabId))
{
JSRuntime.InvokeAsync<object>("RemoveDataTables", $"#{tabPage.DataTabId}");
JSRuntime.InvokeAsync<object>("AddDataTables", $"#{tabPage.DataTabId}");
}
ActivePage = tabPage;
}
StateHasChanged();
}
string GetButtonClass(TabPage page)
{
return page == ActivePage ? "text-yellow-700 font-bold border-t-4 font-medium border-yellow-700 bg-white p-4" : "cursor-pointer p-4 hover:text-yellow-700";
}
async Task ActivatePage(TabPage page)
{
if(page == ActivePage)
{
if(!String.IsNullOrEmpty(page.DataTabId))
{
await JSRuntime.InvokeAsync<object>("RemoveDataTables", "#"+page.DataTabId);
await JSRuntime.InvokeAsync<object>("AddDataTables", $"#{page.DataTabId}");
}
}
else
{
if(!String.IsNullOrEmpty(page.DataTabId))
{
await JSRuntime.InvokeAsync<object>("RemoveDataTables", $"#{page.DataTabId}");
await JSRuntime.InvokeAsync<object>("AddDataTables", $"#{page.DataTabId}");
}
}
ActivePage = page;
StateHasChanged();
}
Following code is in Tab Page component
@using System.Collections.Generic
@using System.Linq
@implements IDisposable
@if (Parent.ActivePage == this)
{
@ChildContent
}
@code {
[CascadingParameter]
private TabControl Parent { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public string Text { get; set; }
[Parameter]
public string? DataTabId { get; set; }
protected override void OnInitialized()
{
if (Parent == null)
throw new ArgumentNullException(nameof(Parent), "TabPage must exist within a TabControl");
base.OnInitialized();
Parent.AddPage(this);
}
}
Index.razor:
in the below code, The Tab control having 3 pages "Show All", "deleted" and "Blocked"
<TabControl>
<TabPage Text="Show all" DataTabId="example">
<div class="p-3 ">
<table id="example" class="display overflow-x-auto" style="width:100%">
<thead>
<tr>
<th class="text-center">User</th>
<th class="text-center">Status</th>
<th class="text-center md:table-cell">Phone</th>
<th class="text-center md:table-cell">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">John</td>
<td class="text-center">Active</td>
<td class="text-center md:table-cell">00022233333</td>
<td class="text-center md:table-cell">xyz@asd.coml</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-center">User</th>
<th class="text-center">Status</th>
<th class="text-center md:table-cell">Phone</th>
<th class="text-center md:table-cell">Email</th>
</tr>
</tfoot>
</table>
</div>
</TabPage>
<TabPage Text="Deleted" DataTabId="example_Deleted">
<div class="p-3 ">
<table id="example" class="display overflow-x-auto" style="width:100%">
<thead>
<tr>
<th class="text-center">User</th>
<th class="text-center">Status</th>
<th class="text-center md:table-cell">Phone</th>
<th class="text-center md:table-cell">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">Dave</td>
<td class="text-center">Deleted</td>
<td class="text-center md:table-cell">0044566656</td>
<td class="text-center md:table-cell">dfgd@sdfdfds.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-center">User</th>
<th class="text-center">Status</th>
<th class="text-center md:table-cell">Phone</th>
<th class="text-center md:table-cell">Email</th>
</tr>
</tfoot>
</table>
</div>
</TabPage>
</TabControl>
When I tried switching between tabs the "Search" and the "Pagination" controls are not shown for the "Deleted" tab. But the "Show All" tab displaying all correctly.
Can any one faced this issue?