【发布时间】：2021-10-23 07:00:40
【问题描述】：
我在我的应用程序中使用bootstrap-table来实现分页、全局搜索等。它是一个使用Blazor framework(.net 5)的单页应用程序。问题是当我运行该应用程序时，它会立即显示一个带有分页、搜索的引导表，但随后它消失并变成了一个常规引导表。
我尝试了什么：
我的索引.razor
@page "/"
@inherits IndexBase
<div class="container mt-3 mb-3">
<table class="table table-hover" id="tblCustomers"
data-toggle="table"
data-pagination="true"
data-search="true"
data-search-align="left"
data-show-refersh="true"
data-detail-view="true"
data-detail-formatter="detailFormatter">
<thead>
<tr>
<th data-field="Id" data-width="18" data-align="center" data-sortable="true">Cust Id</th>
<th data-field="Name" data-width="18" data-align="center" data-sortable="true">Cust Name</th>
<th data-field="GId" data-width="18" data-align="center" data-sortable="true">G Id</th>
<th data-field="AccNo" data-width="18" data-align="center" data-sortable="true">Acc No</th>
<th data-field="Active" data-width="18" data-align="center" data-sortable="true">Active</th>
<th data-field="Key" data-width="18" data-align="center" data-sortable="true">Key</th>
<th data-field="action" data-align="center">Action</th>
</tr>
</thead>
<tbody>
@if (Customers == null)
{
<tr rowspan="10">
<td colspan="8" style="text-align:center"> <div class="spinner">
<img src="/images/loader.gif" height="60" width="40"/>
</div>
</td>
</tr>
}
else
@foreach (var cust in Customers)
{
<tr>
<td>@cust.CustomerId</td>
<td>@cust.CustomerName</td>
<td>@cust.GId</td>
<td>@cust.AccNo</td>
<td>@cust.IsActive</td>
<td>Not available</td>
<td>
<a href="" class="edit" style="text-decoration:none;" title="edit" @onclick="(()=>OnEdit(cust.CustomerId))" @onclick:preventDefault> <i class="fa fa-edit fa-lg fa-charade"></i></a>
<a href="" class="remove" style="text-decoration:none;" title="remove" @onclick="() =>OnDelete(cust)" @onclick:preventDefault> <i class="fa fa-trash fa-lg fa-charade"></i></a>
</td>
</tr>
}
</tbody>
</table>
</div>
_host.cshtml
@page "/"
@namespace MyBlazorApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MyBlazorApp</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="MyBlazorApp.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="~/js/bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" href="~/css/custom/main.css" />
<link rel="stylesheet" href="~/css/custom/header.css" />
<link rel="stylesheet" href="~/css/custom/index.css" />
<link rel="stylesheet" href="~/css/custom/customer.css" />
<style type="text/css">
/* width */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:horizontal {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #555;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">????</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="~/js/jquery/jquery-3.6.0.min.js"></script>
<script src="~/js/popper/popper.min.js"></script>
<script src="~/js/bootstrap/bootstrap.min.js"></script>
<script src="~/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="~/js/jquery-resizable/dist/jquery.resizableColumns.min.js"></script>
<script src="~/js/bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script>
<script>
$(function () {
$(".search").append('<span><i class="fa fa-search fa-search-custom" aria-hidden="true"></i></span>');
/* add the span inside search div with append box*/
})
function detailFormatter(index, row) {
//debugger;
var html = [];
$.each(row, function (key, value) {
if (key == 'Id' || key == 'Name' || key == 'AccNo' || key == 'Active') {
html.push('<p class="row" style="width:50%;float:right"><b col="col-md-2">' + key + '</b><span class="col-md-10">: ' + value + '</span></p>');
}
});
return html.join('');
}
</script>
</body>
</html>
我错过了什么？任何帮助将不胜感激。
【问题讨论】：
-
您能否向我们展示实际的分页代码 - 或者（甚至更好）展示您的问题的工作示例。主要问题是 JS 和 Blazor 相互干扰，但如果不了解您实际在做什么，就很难为您指明正确的方向。
-
我添加了。谢谢@MrCakaShaunCurtis
-
您在使用bootstrap-table.com 吗？你能分享你的整个 _Host.cshtml 吗？
-
您可以将所有 CDN 链接用于引导程序和引导程序表吗？ （使用引导程序 4）看看它是否有效？
-
最初，我是使用 CDN 链接完成的，但问题仍然存在。此外，在硬刷新后它工作正常（使用 CDN 链接）
标签： c# blazor bootstrap-table