ASP.NET Core MVC中jQuery DataTables仅显边框不显示内容的解决问询

以下是针对你代码中问题的修复步骤：

1. 修正表格选择器错误 #

LoadGrid1函数里使用了$("#DATATABLE1")，但视图里的表格ID是table1，选择器不匹配导致数据无法绑定。把选择器改成$("#table1")：

const LoadGrid1 = async () => {
    $("#table1").DataTable({
        // 原有配置...
    });
}

2. 移除重复的DataTables初始化 #

在$(document).ready中，你先对table1和table2做了空初始化，之后又调用LoadGrid1重新初始化table1，重复初始化会导致冲突。保留带配置的初始化，移除空的初始化：

$(document).ready(function () {
    LoadGrid1();
    // 后续添加table2的初始化逻辑
});

3. 修复列标题的语法错误 #

columns配置里的StudID和Remarks标题缺少开头的单引号，同时Teacher被拼写成了Teachere，这些语法错误会导致DataTables无法正常初始化：

columns: [
    { data: 'StudID', title: 'StudID', autoWidth: true },
    { data: 'StudCode', title: 'Stud Code', autoWidth: true },
    { data: 'ClassNo', title: 'Class No', autoWidth: true },
    { data: 'Teacher', title: 'Teacher', autoWidth: true },
    { data: 'Remarks', title: 'Remarks', autoWidth: true },
],

4. 为table2添加数据加载逻辑 #

目前table2只有空结构，没有数据来源，需要添加对应的初始化代码（类似LoadGrid1），示例如下：

const LoadGrid2 = async () => {
    $("#table2").DataTable({
        serverSide: true,
        filter: false,
        scrollY: StaticData.TABLE_HEIGHT + 'px',
        scrollX: true,
        lengthMenu: StaticData.TABLE_PAGE_SIZE,
        scrollCollapse: true,
        searchDelay: 800,
        ajax: {
            url: '/STUD_MANAGEMENT/LoadTable2Data', // 替换为table2的数据源接口
            type: 'GET',
            datatype: 'json',
            data: (d) => { return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir } },
            beforeSend: () => { ShowLoader(); },
            complete: () => { HideLoader(); },
            dataSrc: (json) => {
                json = json.data;
                _log(json);
                return json;
            }
        },
        columns: [
            // 根据table2的数据源配置对应列
            { data: 'Column1', title: '列1', autoWidth: true },
            { data: 'Column2', title: '列2', autoWidth: true },
            // ...其他列
        ],
        columnDefs: [
            // 按需配置列样式
        ],
    });
}

然后在$(document).ready中调用LoadGrid2()：

$(document).ready(function () {
    LoadGrid1();
    LoadGrid2();
});

5. 确认依赖资源已正确引入 #

确保你的视图中已经引入了jQuery、DataTables的CSS和JS文件，示例如下：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

如果使用本地资源，替换为对应的本地文件路径即可。

6. 检查后端接口返回格式 #

确保/STUD_MANAGEMENT/LoadStuds等接口返回符合DataTables服务器端要求的JSON格式，必须包含draw、recordsTotal、recordsFiltered和data字段，示例格式：

{
    "draw": 1,
    "recordsTotal": 100,
    "recordsFiltered": 100,
    "data": [
        { "StudID": 1, "StudCode": "S001", "ClassNo": "C01", "Teacher": "张老师", "Remarks": "无" },
        // 其他数据行
    ]
}

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