如何解决为什么表体中没有数据？
我一直在尝试在 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,"All"]],bFilter: true,bSort: true,bPaginate: true,searching: false,data: response,columns: [
{ 'data': 'UserID' },{ 'data': 'UserName' },{ 'data': 'BranchID' },{ 'data': 'DepartmentID' },{ 'data': 'EmailAddress' }]
});
};
</script>
解决方法
“列”中数据表中 JSON 数据的映射看起来与数据的顺序不同，并且数据键名称以小写字母开头。请参阅下文。
确保在 DataTables 库之前拥有您的 JQuery 库，并且只有一个版本的 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" }
]
});
});
您的成功回调看起来缺少正确的函数调用
$.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);
}
});
});
-
您需要将列值更改为驼峰式：
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);
}
Data.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",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,"All"]],bFilter: true,bSort: true,bPaginate: true,searching: false,data: response,columns: [
{ 'data': 'userID' },{ 'data': 'emailAddress' }]
});
};
</script>
}
结果：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
