【发布时间】：2022-12-11 08:28:32
【问题描述】：
我在 asp.net core 5 上工作。我面临问题
显示所有员工数据时不显示分页。
所有员工的展示都没有任何问题。
我的分页问题不显示。 检查浏览器时显示此错误
Uncaught TypeError: $(...).Pagination is not a function
at HTMLDocument.<anonymous> (site.js:4:26)
at e (jquery.min.js:2:30005)
at t (jquery.min.js:2:30307)
我通过 Controller Employee action Index 显示数据 employee
我的行动观指数
@model TestEmployee.ViewModels.EmployeePageViewModel
@{
ViewData["Title"] = "Index";
}
<h1>Index</h1>
<link href="~/lib/simplePagination/simplePagination.css" rel="stylesheet" />
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 18px;
background: #f4f4f4;
}
.list-wrapper {
padding: 15px;
overflow: hidden;
}
.list-item {
border: 1px solid #EEE;
background: #FFF;
margin-bottom: 10px;
padding: 10px;
box-shadow: 0px 0px 10px 0px #EEE;
}
.list-item h4 {
color: #FF7182;
font-size: 18px;
margin: 0 0 5px;
}
.list-item p {
margin: 0;
}
.simple-pagination ul {
margin: 0 0 20px;
padding: 0;
list-style: none;
text-align: center;
}
.simple-pagination li {
display: inline-block;
margin-right: 5px;
}
.simple-pagination li a,
.simple-pagination li span {
color: #666;
padding: 5px 10px;
text-decoration: none;
border: 1px solid #EEE;
background-color: #FFF;
box-shadow: 0px 0px 10px 0px #EEE;
}
.simple-pagination .current {
color: #FFF;
background-color: #FF7182;
border-color: #FF7182;
}
.simple-pagination .prev.current,
.simple-pagination .next.current {
background: #e04e60;
}
</style>
<table class="table">
<tr>
<th>
EmployeeName
</th>
<th>
EmployeeAdress
</th>
<th>
Logo
</th>
<th></th>
</tr>
@foreach (var emp in Model.employees)
{
<tr>
<td>@emp.EmployeeName</td>
<td>@emp.EmployeeAdress</td>
<td>@emp.Logo</td>
</tr>
}
</table>
<ul id="emp-pagination" class="pagination"></ul>
<input asp-for="Pager.NumberOfPages" type="hidden" id="hdnTotalNumberOfPages" value="@Model.Pager.NumberOfPages" />
<input asp-for="Pager.CurrentPage" type="hidden" id="hdnCurrentPage" value="@Model.Pager.CurrentPage" />
@section Scripts{
<script>
$(document).ready(function () {
console.log("success")
var items = $(".list-wrapper .list-item");
var numItems = items.length;
var perPage = 5;
items.slice(perPage).hide();
$('#emp-pagination').Pagination({
pages: $('#hdnTotalNumberOfPages').val(),
currentPage: $('#hdnCurrentPage').val(),
itemsOnPage: 5,
cssStyle: 'light-theme',
onPageClick: function (pageNo) {
var url = "/Employee/Index?pageNumber=" + pageNo;
window.location.href = url;
},
hrefTextSuffix: '',
selectOnClick: true
})
})
</script>
}
控制器 员工行动指数
public ActionResult Index(int pageNumber = 1)
{
var allemployee = _employee.GetAllEmployee();
var result = _pageHelper.GetPage(allemployee.AsQueryable(), pageNumber);
var employeesData = new EmployeePageViewModel
{
employees = result.Items,
Pager = result.Pager
};
return View(employeesData);
}
更新后的帖子
console log browser errors
Failed to load resource: the server responded with a status of 404 ()
index:43 success
jquery.min.js:2 jQuery.Deferred exception: $(...).Pagination is not a function TypeError: $(...).Pagination is not a function
at HTMLDocument.<anonymous> (https://localhost:44377/Employee/index:44:30)
at e (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:30005)
at t (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:30307) undefined
S.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $(...).Pagination is not a function
at HTMLDocument.<anonymous> (index:44:30)
at e (jquery.min.js:2:30005)
at t (jquery.min.js:2:30307)
simplePagination.css:1
我的布局页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - TestEmployee</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">TestEmployee</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - TestEmployee - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<link href="~/lib/simplePagination/simplePagination.css" rel="stylesheet" />
<script src="https://cdn.tutorialjinni.com/simplePagination.js/1.6/jquery.simplePagination.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@section Scripts{
<script>
$(document).ready(function () {
console.log("success")
$('#emp-pagination').Pagination({
pages: $('#hdnTotalNumberOfPages').val(),
currentPage: $('#hdnCurrentPage').val(),
itemsOnPage: 5,
cssStyle: 'light-theme',
onPageClick: function (pageNo) {
var url = "/Employee/Index?pageNumber=" + pageNo;
window.location.href = url;
},
hrefTextSuffix: '',
selectOnClick: true
})
})
</script>
}
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
【问题讨论】：
-
如果您看到
Pagination is not a function，则表明没有为您的分页加载项正确加载库。 -
所以我该怎么做才能加载它
-
在动作控制器数据显示和分页上但在 jquery 上我不知道会发生什么
-
检查你的控制台。我看到
~/lib/simplePagination.js/jquery.simplePagination.js是你的 src，确保该文件在网络服务器上是可读的。 -
如何从控制台读取它
标签： jquery asp.net-core jquery-ui model-view-controller asp.net-core-mvc