Paging with Blazor

rdunaway

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" });

}

raboud

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");
        });

raboud

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.