Working with Datatable and Blazor Server side

Working with Datatable and Blazor Server side

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

Answers

  • colincolin Posts: 12,600Questions: 0Answers: 2,154

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

    Cheers,

    Colin

  • walter.iermano@live.comwalter.iermano@live.com Posts: 5Questions: 3Answers: 0

    Thanks but in server side not works

  • kthorngrenkthorngren Posts: 13,773Questions: 25Answers: 3,242

    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.comwalter.iermano@live.com Posts: 5Questions: 3Answers: 0

    Thanks now all is ok

  • franciscovillenafranciscovillena Posts: 1Questions: 0Answers: 0

    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?

  • gerhardmeijgerhardmeij Posts: 2Questions: 0Answers: 0

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

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

  • colincolin Posts: 12,600Questions: 0Answers: 2,154

    Good information, thanks for sharing,

    Colin

  • curtis_jacksoncurtis_jackson Posts: 3Questions: 0Answers: 0

    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>
    
  • colincolin Posts: 12,600Questions: 0Answers: 2,154

    Thanks for posting!

    Colin

  • curtis_jacksoncurtis_jackson Posts: 3Questions: 0Answers: 0

    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_jacksoncurtis_jackson Posts: 3Questions: 0Answers: 0

    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!

  • sochansochan Posts: 1Questions: 0Answers: 0

    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);
        }
    }
    
  • colincolin Posts: 12,600Questions: 0Answers: 2,154

    Nice, thanks for posting,

    Coln

Sign In or Register to comment.