jQuery DataTableS样式在ASP Net Core Razor页面中不起作用的部分视图
我有一个部分视图，该视图具有数据列表以显示客户列表。一切正常，除了DataTableS未被设计，并且未显示搜索。我添加了所有参考文献，并在
_layout.cshtml
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>@ViewBag.Title</title>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet"/>
</head>
<body class="sb-nav-fixed">
@RenderBody()
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</body>
</html>
custormers.cshtml
@model Web.Pages.Customer.CustomersModel
@{
ViewData["Title"] = "Registration";
}
<div class="card">
<div class="col-sm-12" style="padding:20px">
<a onclick="jQueryModalGet('?handler=CreateOrEdit','New Customer')" class="btn btn-success">
Create
</a>
<a id="reload" class="btn bg-warning">
Reload
</a>
</div>
<div id="viewAll" class="card-body table-responsive"></div>
</div>
@section Scripts
{
<script>
$(document).ready(function () {
$('#viewAll').load('?handler=ViewAllPartial');
});
$(function () {
$('#reload').on('click', function () {
$('#viewAll').load('?handler=ViewAllPartial');
});
});
</script>
}
customersmodel.cs
{
public class CustomersModel : PageModel
{
private readonly ICustomerRepository _customer;
private readonly IUnitOfWork _unitOfWork;
private readonly IRazorRenderService _renderService;
private readonly ILogger<CustomersModel> _logger;
public CustomersModel(ILogger<CustomersModel> logger, ICustomerRepository customer, IRazorRenderService renderService)
{
_logger = logger;
_customer = customer;
_renderService = renderService;
}
public IEnumerable<Core.Entities.Customer> Customers { get; set; }
public IEnumerable<CustomerModel> CustomerModel{ get; set; }
public void OnGet()
{
}
public PartialViewResult OnGetViewAllPartial()
{
CustomerModel = _customer.GetAsync();
return new PartialViewResult
{
ViewName = "_ViewAll",
ViewData = new ViewDataDictionary<IEnumerable<CustomerModel>>(ViewData, CustomerModel)
};
}
}
}
_viewall.cshtml
@model IEnumerable<CustomerModel>
<table class="display" id="#dataTable">
<thead>
<tr>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Age
</th>
<th>
PhoneNumber
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
@if (Model.Count() != 0)
{
@foreach (var customer in Model)
{
<tr>
<td>
@customer.FirstName
</td>
<td>
@customer.LastName
</td>
<td>
@customer.Age
</td>
<td>
@customer.PhoneNumber
</td>
<td>
@customer.Address
</td>
</tr>
}
}
</tbody>
</table>
<script>
$(document).ready(function () {
$("#dataTable").DataTable();
});
</script>
BWROSER
I have a partial view that has a datatable to show list of customers. Everything works fine except that datatables is not styled and search is not shown. I have added all the references and tried it on This JS Fiddle and it works fine. But when it comes to my razor pages it doesn't.I have included screenshot of my out pit at the end.Below is my code.
_Layout.cshtml
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>@ViewBag.Title</title>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet"/>
</head>
<body class="sb-nav-fixed">
@RenderBody()
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</body>
</html>
Custormers.cshtml
@model Web.Pages.Customer.CustomersModel
@{
ViewData["Title"] = "Registration";
}
<div class="card">
<div class="col-sm-12" style="padding:20px">
<a onclick="jQueryModalGet('?handler=CreateOrEdit','New Customer')" class="btn btn-success">
Create
</a>
<a id="reload" class="btn bg-warning">
Reload
</a>
</div>
<div id="viewAll" class="card-body table-responsive"></div>
</div>
@section Scripts
{
<script>
$(document).ready(function () {
$('#viewAll').load('?handler=ViewAllPartial');
});
$(function () {
$('#reload').on('click', function () {
$('#viewAll').load('?handler=ViewAllPartial');
});
});
</script>
}
CustomersModel.cs
{
public class CustomersModel : PageModel
{
private readonly ICustomerRepository _customer;
private readonly IUnitOfWork _unitOfWork;
private readonly IRazorRenderService _renderService;
private readonly ILogger<CustomersModel> _logger;
public CustomersModel(ILogger<CustomersModel> logger, ICustomerRepository customer, IRazorRenderService renderService)
{
_logger = logger;
_customer = customer;
_renderService = renderService;
}
public IEnumerable<Core.Entities.Customer> Customers { get; set; }
public IEnumerable<CustomerModel> CustomerModel{ get; set; }
public void OnGet()
{
}
public PartialViewResult OnGetViewAllPartial()
{
CustomerModel = _customer.GetAsync();
return new PartialViewResult
{
ViewName = "_ViewAll",
ViewData = new ViewDataDictionary<IEnumerable<CustomerModel>>(ViewData, CustomerModel)
};
}
}
}
_ViewAll.cshtml
@model IEnumerable<CustomerModel>
<table class="display" id="#dataTable">
<thead>
<tr>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Age
</th>
<th>
PhoneNumber
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
@if (Model.Count() != 0)
{
@foreach (var customer in Model)
{
<tr>
<td>
@customer.FirstName
</td>
<td>
@customer.LastName
</td>
<td>
@customer.Age
</td>
<td>
@customer.PhoneNumber
</td>
<td>
@customer.Address
</td>
</tr>
}
}
</tbody>
</table>
<script>
$(document).ready(function () {
$("#dataTable").DataTable();
});
</script>
Update Network tab of the Bwroser
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先，您需要将
id =“＃DataTable”更改为id =“ datatable” 。代码> datatables.min.js 和JS代码中的castormers.cshtml。_viewall.cshtml：
custormers.cshtml：
结果：
Firstly,you need to change
id="#dataTable"toid="dataTable".And then putdataTables.min.css,dataTables.min.jsand js code into Custormers.cshtml._ViewAll.cshtml:
Custormers.cshtml:
result:
如果缺少样式，则CSS也无法正确加载，并且对于DataTable.js文件是搜索栏丢失。请检查您的代码并发送捕获，检查检查员控制台上的任何错误并共享反馈。
If the style is missing the the CSS is not loading correctly, as well for the datatable.js file is the search bar is missing. Please inspect your code and send a capture, check for any error on inspector console and share the feedback.