为啥表体中没有数据？
Posted
技术标签:
【中文标题】为啥表体中没有数据？【英文标题】：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="
"columnDefs": [
"targets": [0, 7],
"orderable": false
],
"order": [],
"info":
"totalQty": "#datatableWithPaginationInfoTotalQty"
,
"search": "#datatableSearch",
"entries": "#datatableEntries",
"pageLength": 15,
"isResponsive": false,
"isShowPaging": false,
"pagination": "datatablePagination"" 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 引用数组
【参考方案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="
"columnDefs": [
"targets": [0, 7],
"orderable": false
],
"order": [],
"info":
"totalQty": "#datatableWithPaginationInfoTotalQty"
,
"search": "#datatableSearch",
"entries": "#datatableEntries",
"pageLength": 15,
"isResponsive": false,
"isShowPaging": false,
"pagination": "datatablePagination"" 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>
结果：
【讨论】：
以上是关于为啥表体中没有数据？的主要内容，如果未能解决你的问题，请参考以下文章