为什么表体中没有数据？答案

【问题标题】：Why is there no data in the table body?为什么表体中没有数据？
【发布时间】：2021-04-16 08:27:36
【问题描述】：

我一直在尝试在 jQuery 数据表上显示数据，但没有成功。我能够从 .Net Core Controller 获取数据，并且在我看来，我可以在调试输出时看到数据，但表体部分没有输出。为了成功显示数据库中的数据，我缺少什么。

<table id="datatable" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table dataTable no-footer" data-hs-datatables-options="{
 &quot;columnDefs&quot;: [{
    &quot;targets&quot;: [0, 7],
    &quot;orderable&quot;: false
  }],
 &quot;order&quot;: [],
 &quot;info&quot;: {
   &quot;totalQty&quot;: &quot;#datatableWithPaginationInfoTotalQty&quot;
 },
 &quot;search&quot;: &quot;#datatableSearch&quot;,
 &quot;entries&quot;: &quot;#datatableEntries&quot;,
 &quot;pageLength&quot;: 15,
 &quot;isResponsive&quot;: false,
 &quot;isShowPaging&quot;: false,
 &quot;pagination&quot;: &quot;datatablePagination&quot;}" role="grid" aria-describedby="datatable_info">
    <thead class="thead-light">
        <tr role="row">
            <th class="table-column-pr-0 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 44px;">
                <div class="custom-control custom-checkbox">
                    <input id="datatableCheckAll" type="checkbox" class="custom-control-input">
                    <label class="custom-control-label" for="datatableCheckAll"></label>
                </div>
            </th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserID</th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserName</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 195px;">BranchID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 177px;">DepartmentID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 146px;">EmailAddress</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 114px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"> 
</script>
<script>
$(function () {
    
    $.ajax({
    type: "POST",
    url: "/ApplicationUsers/LoadData",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function (response) {
        alert(response.d);
    },
    error: function (response) {
        alert(response.d);
    }
});
});


// INITIALIZATION OF DATATABLES
// =======================================================
function OnSuccess(response) {
    $.noConflict();
    $('#datatable').DataTable(
        {
            dom: 'Bfrtip',
            bLengthChange: true,
            lengthMenu: [[5, 10, -1], [5, 10, "All"]],
            bFilter: true,
            bSort: true,
            bPaginate: true,
            searching: false,
            data: response,
            columns: [
                { 'data': 'UserID' },
                { 'data': 'UserName' },
                { 'data': 'BranchID' },
                { 'data': 'DepartmentID' },
                { 'data': 'EmailAddress' }]
        });
};





 </script>

【问题讨论】：

你能分享响应json吗？
@MuhammadMuradHaider ibb.co/BVtyKwQ
我的意思是，尝试检查响应是否可能嵌套到另一个级别，例如它可能像 {values :[{obj1}, {obj2}]}。因此，请尝试使用您的响应 json 执行 console.log 以查看其结构，在这种情况下您需要提及该键，例如response.data 或 response.values（例如 json ）
@MuhammadMuradHaider 图片显示了一个普通的 json 数组。
是的，实际上你已经扩展了特定的对象，所以我想知道，似乎 json 数组的键是data，所以你需要通过 response.data 引用数组

标签： jquery asp.net-core datatables

【解决方案1】：

您的成功回调似乎缺少正确的函数调用

$.ajax({
 type: "POST",
 url: "/ApplicationUsers/LoadData",
 data: '{}',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(response) {  //maybe try to call like this?
  OnSuccess(response);
 }
 failure: function (response) {
    alert(response.d);
 },
 error: function (response) {
    alert(response.d);
 }
 });
 });

【讨论】：

我现在收到错误“表中没有可用数据”
我不熟悉数据表，但我发现您在此页面上尝试执行的操作 datatables.net/manual/ajax 看起来必须将 ajax 传递给 DataTable() 函数

【解决方案2】：

在“列”中的 DataTables 中的 JSON 数据映射看起来与数据的顺序不同，并且数据键名称以小写字母开头。请看下文。

确保您的 JQuery 库在 DataTables 库之前，并且只有一个版本的 JQuery 库

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> 
</script>

$(document).ready(function () { 
     $('#datatable').DataTable({
        ajax: {
        url: '/ApplicationUsers/LoadData',
        "dataSrc": ""
        },
        columns: [
            { data: "userID" },
            { data: "userName" },
            { data: "departmentID" },
            { data: "branchID" },
            { data: "emailAddress" }
        ]
     });
});

【讨论】：

在我的浏览器控制台中我收到错误'Uncaught TypeError: $(...).DataTable is not a function'
这通常意味着它没有找到 DataTable 库。请更新您的 Jquery 和 DataTable 库

【解决方案3】：

您需要将列值更改为 camelCase：

 columns: [
     { 'data': 'userID' },
     { 'data': 'userName' },
     { 'data': 'branchID' },
     { 'data': 'departmentID' },
     { 'data': 'emailAddress' }]
});

如果遇到错误'Uncaught TypeError: $(...).DataTable is not a function'，可以参考this SO question。并检查 devtools Network，打开 devtools 并进入页面，您可以看到如下结果：

这是一个工作演示：

控制器：

public IActionResult LoadData()
        {
            List<Data> l = new List<Data> { new Data { UserID = 1, UserName = "u1", BranchID = 11, DepartmentID = 111, EmailAddress = "e1" }, new Data { UserID = 2, UserName = "u2", BranchID = 22, DepartmentID = 222, EmailAddress = "e2" } };
            return Json(l);
        }

数据.cs：

public class Data {
    public int UserID { get; set; }
    public string UserName { get; set; }
    public int BranchID { get; set; }
    public int DepartmentID { get; set; }

    public string EmailAddress { get; set; }


    }

查看：

<table id="datatable" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table dataTable no-footer" data-hs-datatables-options="{
                 &quot;columnDefs&quot;: [{
                    &quot;targets&quot;: [0, 7],
                    &quot;orderable&quot;: false
                  }],
                 &quot;order&quot;: [],
                 &quot;info&quot;: {
                   &quot;totalQty&quot;: &quot;#datatableWithPaginationInfoTotalQty&quot;
                 },
                 &quot;search&quot;: &quot;#datatableSearch&quot;,
                 &quot;entries&quot;: &quot;#datatableEntries&quot;,
                 &quot;pageLength&quot;: 15,
                 &quot;isResponsive&quot;: false,
                 &quot;isShowPaging&quot;: false,
                 &quot;pagination&quot;: &quot;datatablePagination&quot;}" role="grid" aria-describedby="datatable_info">
    <thead class="thead-light">
        <tr role="row">
            <th class="table-column-pr-0 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 44px;">
                <div class="custom-control custom-checkbox">
                    <input id="datatableCheckAll" type="checkbox" class="custom-control-input">
                    <label class="custom-control-label" for="datatableCheckAll"></label>
                </div>
            </th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserID</th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserName</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 195px;">BranchID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 177px;">DepartmentID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 146px;">EmailAddress</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 114px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
@section scripts{
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
    <script>
        $(function () {

            $.ajax({
                type: "POST",
                url: "/ApplicationUsers/LoadData",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });


        // INITIALIZATION OF DATATABLES
        // =======================================================
        function OnSuccess(response) {
            //$.noConflict();
            $('#datatable').DataTable(
                {
                    dom: 'Bfrtip',
                    bLengthChange: true,
                    lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                    bFilter: true,
                    bSort: true,
                    bPaginate: true,
                    searching: false,
                    data: response,
                    columns: [
                        { 'data': 'userID' },
                        { 'data': 'userName' },
                        { 'data': 'branchID' },
                        { 'data': 'departmentID' },
                        { 'data': 'emailAddress' }]
                });
        };

    </script>
}

结果：

【讨论】：