Blazor中Bootstrap Table分页、全局搜索功能异常问题求助

问题根因 #

你遇到的问题是Blazor渲染机制和jQuery类库初始化时机冲突导致的：
你当前用了ServerPrerendered预渲染模式，页面首次从服务端返回时，jQuery已经基于预渲染的DOM初始化好了bootstrap-table，但是Blazor客户端连接建立后，会重写整个DOM节点，之前bootstrap-table生成的扩展DOM（搜索框、分页条等）会被直接覆盖，就变回了普通表格。

修复步骤 #

1. 修正属性拼写和字段映射 #

• 首先删除table上的data-toggle="table"属性，我们改为手动初始化，不需要自动触发
• 修正拼写错误：data-show-refersh改为data-show-refresh
• 修正表头data-field和实际字段的映射，否则bootstrap-table无法正确读取数据：

<!-- 修改前 -->
<th data-field="Id" ...>Cust Id</th>
<th data-field="Name" ...>Cust Name</th>
<!-- 修改后 -->
<th data-field="CustomerId" ...>Cust Id</th>
<th data-field="CustomerName" ...>Cust Name</th>

其他字段同理，data-field要和你C#实体类的属性名完全一致。

2. 新增手动初始化的JS方法 #

在_host.cshtml的脚本块里新增bootstrap-table初始化方法，替换原来jQuery ready里的初始化逻辑：

function initBootstrapTable() {
    $('#tblCustomers').bootstrapTable();
    $(".search").append('<span><i class="fa fa-search fa-search-custom" aria-hidden="true"></i></span>');
}

// 原有detailFormatter方法保留
function detailFormatter(index, row) {
    // 原有逻辑不变
}

3. 在Blazor生命周期中触发初始化 #

在Index.razor中注入IJSRuntime，重写OnAfterRenderAsync生命周期方法，等Blazor完全接管DOM后再初始化bootstrap-table：

@page "/"
@inherits IndexBase
@inject IJSRuntime JSRuntime @* 新增注入 *@

<!-- 原有页面代码不变 -->

在你的IndexBase类中添加如下代码：

public partial class IndexBase
{
    // 原有其他逻辑不变
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 确保Customers数据加载完成后再调用初始化
            await LoadCustomersData(); // 替换为你自己加载Customers数据的方法
            await JSRuntime.InvokeVoidAsync("initBootstrapTable");
        }
    }
}

4. 数据更新后刷新表格 #

如果你后续有增删改数据的操作，操作完成后调用JS方法刷新表格即可：

// 比如删除完成后调用
await JSRuntime.InvokeVoidAsync("eval", "$('#tblCustomers').bootstrapTable('refresh')");

内容的提问来源于stack exchange，提问作者ss_rn