Working with Datatable and Blazor Server side

walter.iermano@live.com

I love working with datatable but I can't use it with server side Blazor, is there anyone who has a really working example?
i followed a few posts here but i couldn't get it to work

colin

This thread should help, it's asking the same thing.

Cheers,

Colin

walter.iermano@live.com

Thanks but in server side not works

kthorngren

Thanks but in server side not works

What isn't working?

Are you getting alert messages or errors in the browser's console?

Kevin

walter.iermano@live.com

Thanks now all is ok

franciscovillena

I faced the same issue and couldn't get the code on https://datatables.net/forums/discussion/56389/datatables-with-blazor to work 100% for me.

See https://stackoverflow.com/questions/62176800/using-datatables-net-with-server-side-blazor-application/62182706 for how I got it working.

What approach did you take?

gerhardmeij

For a complete tutorial and solution, check out his post:

https://gmtech.co.za/how-to-add-js-data-tables-to-your-blazor-project/

colin

Good information, thanks for sharing,

Colin

curtis_jackson

So I took all the ideas I found here fined it down to what I called an improvement.

Just sharing in case anyone thinks it an improvement like I did.

First create a DataTable.razor component like the following:

@inject Microsoft.JSInterop.IJSRuntime JSRuntime;

<table id="@Id" class="table" style="width:100%">
    @ChildContent
</table>

@code
{
    [Parameter]
    public bool Searchable { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Id { get; set; } = "DataTable-" + Guid.NewGuid().ToString();


    protected override void OnParametersSet()
    {
        StateHasChanged();
        base.OnParametersSet();
    }

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeAsync<string>("init_datatable", new object[] { $"#{Id}", Searchable });
        await base.OnAfterRenderAsync(firstRender);
    }
}

Then create a JavaScript file, place a reference to it after the body tag in your _Host.cshtml file, then add the following function within

function init_datatable(table, searching) {
    $(table).DataTable({
        "searching": searching
    });
}

And that's it, works perfectly. Here is an example of me using mine:

<DataTable>
    <thead>
        <tr>
            <th></th>
            <th>File Name</th>
            <th>Company Entry Description</th>
            <th>Date Generated</th>
            <th>Effective Date</th>
            <th>Previously Downloaded</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var link in _data ?? Array.Empty<DownloadHistory>())
        {
            <tr>
                <td><a href="javascript: void(0);" @onclick=@(() => DownloadFile(link))>Download</a></td>
                <td>@link.FileName</td>
                <td>@link.CompanyEntryDesc</td>
                <td>@link.DateGenerated</td>
                <td>@link.EffDate</td>
                <td>
                    @if(link.NumberOfDownloads > 0)
                    {
                        <text>Yes</text>
                    }
                    else
                    {
                        <text>No</text>
                    }
                </td>
            </tr>            
        }
    </tbody>                   
</DataTable>

colin

Thanks for posting!

Colin

curtis_jackson

Hey I have made even more improvement and thought I should share

@inject Microsoft.JSInterop.IJSRuntime JSRuntime;

<table id="@id" class="table" style="width:100%" @attributes=UserAttributes>
    @ChildContent
</table>

@code
{
    [Parameter]
    public bool Searchable { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string id { get; set; } = "DataTable-" + Guid.NewGuid().ToString();

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> UserAttributes { get; set; }


    protected override void OnParametersSet()
    {
        StateHasChanged();
    }

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeAsync<string>("init_datatable", new object[] { $"#{id}", Searchable });        
    }
}

These changes allow for a more natural feel of using a component that is suppose to generate a table tag and also allow for the ability to add CSS attributes. Now the component is more reusable.

curtis_jackson

Also, if you want to ensure that you don't accidentally supply an ID attribute to the component and override its dependent "id" value; place the "id" attribute after the attribute splatting implementation like this:

<table class="table" style="width:100%" @attributes=UserAttributes id="@id" >
    @ChildContent
</table>

This will protect the "id" attribute from being overridden... cheers!

sochan

Hi, you need to put within "div" to solve the issues of not clearing head and footer of DataTable while clicking on other page in Blazor.

<div><DataTable>...</DataTable></div>

Or making DataTable component within div as the following code then you do not worry about fogetting "div", it works for me. Thanks very much.

@inject Microsoft.JSInterop.IJSRuntime JSRuntime;
<div>
    <table id="@id" class="table" style="width:100%" @attributes=UserAttributes>
        @ChildContent
    </table>
</div>

@code
{
    [Parameter]
    public bool Searchable { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string id { get; set; } = "DataTable-" + Guid.NewGuid().ToString();

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> UserAttributes { get; set; }


    protected override void OnParametersSet()
    {
        StateHasChanged();
    }

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeAsync<string>("AddDataTable", new object[] { $"#{id}", Searchable });
        await base.OnAfterRenderAsync(firstRender);
    }
}

colin

Nice, thanks for posting,

Coln

nlpsl202

how to use server-side datatable in blazor server?
server-side datatable using ajax to get data.
I used to doing this in webform webmethod.
but how to do in blazor?