为什么从数据库读取的dataTable数据未在前端表格中正常展示？

以下是DataTable有数据但不显示的常见原因及对应修复方案：

• 视图模型绑定错误：后端返回的ViewData泛型类型为IEnumerable<CoursLevelViewModel>，类名存在拼写错误（应为CourseLevelViewModel，缺字母e），如果分部视图顶部声明的模型类型与后端传入类型不匹配、或者漏写模型声明，会导致视图层Model为null，循环不执行，tbody无内容。
• 分部视图Scripts节不生效：ASP.NET Core Razor Pages中，分部视图内定义的@section Scripts不会被主页面渲染，若将DataTables的初始化代码写在分部视图的Scripts节中，对应JS代码不会加载，表格无法初始化。
• 初始化时机错误：如果是异步加载分部视图，主页面$(document).ready执行时#datatableDOM节点还未插入页面，初始化会失效，后续分部视图加载完成后表格不会被正确渲染。
• DataTables重复初始化报错：如果多次加载同一分部视图，会触发DataTables重复初始化错误，阻止表格渲染。

代码修正示例 #

后端代码修正（修正类型拼写） #

public PartialViewResult OnGetViewAllPartial()
{
    lstLevel =  _CourseLevelApplication.GetCourseLevelForDisplay();
    return new PartialViewResult
    {
        ViewName = "_ViewAll",
        // 确保泛型类型与实际ViewModel类名完全一致
        ViewData = new ViewDataDictionary<IEnumerable<CourseLevelViewModel>>(ViewData, lstLevel)      
    };
}

分部视图_ViewAll代码修正 #

@* 顶部新增模型声明，类型与后端传入完全一致 *@
@model IEnumerable<CourseLevelViewModel>
<table id="datatable" class="table table-striped table-bordered" >
    <thead>
        <tr>
            <th>#</th>                                  
            <th>title</th>                         
            <th>action</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>                                             
                <td>@item.Id</td>
                <td>@item.Title</td> 
                <td>
                    <a onclick="jQueryModalGet('?handler=CreateOrEdit&id=@item.Id','Edit level')" class="btn btn-info text-white"> Edit</a>
                    <form method="post" asp-page="Index" asp-route-id="@item.Id" asp-page-handler="Delete" onsubmit="return jQueryModalDelete(this)" class="d-inline">
                        <button type="submit" class="btn btn-danger text-white"> Delete</button>
                    </form>
                </td>
            </tr>
        }
    </tbody>
</table>

@* 不要套@section Scripts，直接写script标签，分部视图内Scripts节不会被渲染 *@
<script type="text/javascript">
    $(function () {
        // 先销毁已存在的实例，避免重复初始化报错
        if ($.fn.DataTable.isDataTable('#datatable')) {
            $('#datatable').DataTable().destroy();
        }
        $('#datatable').dataTable();
    });
</script>

主页面代码修正 #

将DataTables的依赖JS引用放在主页面的@section Scripts中，不要放在分部视图里：

@section Scripts {
    <script src="~/AdminTheme/assets/datatables/jquery.dataTables.min.js"></script>
    <script src="~/AdminTheme/assets/datatables/dataTables.bootstrap.js"></script>
}

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