ASP.NET Core 5中jQuery分页组件不显示的问题求助

问题核心现象 #

员工数据正常展示，但分页组件无法渲染，控制台报Uncaught TypeError: $(...).Pagination is not a function，同时存在资源加载404错误。

原因分析 #

1. 插件方法名错误
   simplePagination插件的正确调用方法是小写的pagination()，而非代码中大写的Pagination()，这是函数不存在报错的直接原因。

2. 重复脚本与DOM冲突
   布局页和Index视图同时定义了@section Scripts块，且都包含分页初始化代码：

• 布局页加载时，视图中的#hdnTotalNumberOfPages等DOM元素尚未渲染，会导致脚本执行异常
• 重复初始化分页组件会引发逻辑冲突

3. 资源路径无效（404错误）
   视图和布局页中引用的~/lib/simplePagination/simplePagination.css如果本地目录不存在对应文件，会触发404；同时存在重复引用样式的问题。

4. 冗余前端分页代码
   视图脚本中包含.list-wrapper .list-item的选择与隐藏逻辑，但当前页面使用的是后端分页（通过pageNumber参数刷新页面），这段前端分页代码属于无效冗余，且页面中不存在对应DOM元素。

修复步骤 #

1. 修正插件方法名 #

将所有$('#emp-pagination').Pagination(替换为$('#emp-pagination').pagination(（注意小写p）。

2. 清理重复脚本与样式 #

• 移除布局页中的@section Scripts块，分页初始化逻辑仅保留在Index视图的@section Scripts中
• 删除视图中重复的link标签，统一使用CDN或本地有效路径的样式引用

3. 修复资源路径 #

如果本地未存放simplePagination.css，改用CDN链接：

<link href="https://cdn.tutorialjinni.com/simplePagination.js/1.6/simplePagination.css" rel="stylesheet" />

若使用本地文件，确保~/lib/simplePagination/目录下存在对应CSS文件，可通过NuGet安装或手动下载放置。

4. 移除冗余代码 #

删除视图脚本中无关的前端分页逻辑：

var items = $(".list-wrapper .list-item");
var numItems = items.length;
var perPage = 5;
items.slice(perPage).hide();

修正后关键代码示例 #

Index视图Scripts部分

@section Scripts{
    <script>
        $(document).ready(function () {
            $('#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>
}

布局页脚本部分

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<link href="https://cdn.tutorialjinni.com/simplePagination.js/1.6/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>
@await RenderSectionAsync("Scripts", required: false)

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