Paging with Blazor

Paging with Blazor

rdunawayrdunaway Posts: 6Questions: 1Answers: 0

I've added a zero config table. Zero config comes with paging enabled. When I hover over the next or page 2 I see that the anchor tag is pointing to domain.com/#

Basically # is a placeholder. The problem is when I click the link the application attempts to navigate to root instead of displaying the next page.

JavaScript that I interopt to.

function apply_General_DataTable(tableName) {

$(document).ready(function () {
    $(tableName).DataTable({ "pagingType": "full_numbers"});
    //$(tableName).DataTable();
    //$(tableName).DataTable({ "paging": false });
});

@page "/fetchdata"
@using bm2portal_blazor.Shared
@inject HttpClient Http
@inject IJSRuntime JSRuntime

@implements IDisposable

Weather forecast

This component demonstrates fetching data from the server.

@if (forecasts == null)
{

Loading...

}
else
{

@foreach (var forecast in forecasts) { }
Date Temp. (C) Temp. (F) Summary
@forecast.Date.ToShortDateString() @forecast.TemperatureC @forecast.TemperatureF @forecast.Summary

}

@code {
WeatherForecast[] forecasts;

protected override async Task OnInitializedAsync()
{
    forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast");

    // applies the datatable.net plugin to the table.
    await JSRuntime.InvokeAsync<string>("apply_General_DataTable", new string[] { "#table_id" });

}

Answers

  • raboudraboud Posts: 2Questions: 0Answers: 0

    I had the same problem, i found i had to use some javascript to find the paging link and remove them or they would always send me back to index page. Im sure there is a more eloquent way of doing it but something as simple as the following will at least get the paging working. If anyone finds better solution please let us know.

            $(document).ready(function () {
                $(".page-link").removeAttr("href");
            });
    
  • raboudraboud Posts: 2Questions: 0Answers: 0

    Friend reminded me that dataTables has built in events, and suggested the following to modify the paging-link:

            $(table).on('draw.dt', function () {
                $(".page-link").removeAttr("href");
            });
    

    Again not very elegant but it works.

This discussion has been closed.