多标签数据表不显示数据 [英] Multi tabs datatable doesn't display data
问题描述
我已经在.net核心项目中创建了多选项卡数据表，但是该表未显示数据. 我在控制器操作中调试并返回数据，并且在Ajax成功函数中还可以 但它不会显示在表格中，并且控制台中也没有错误.
I have created multi tab datatable in .net core project, but the table doesn't show data. I debugged and return data in controller action and in Ajax success function is ok but it doesn't display in the table and and there are no errors in the console.
有人可以帮助我吗?
非常感谢.
控制器:
public IActionResult GetCategoryById(int id, int languageId = 0)
{
var categoryViewModel = _categoryRepository.GetCategory(id, languageId);
CategoryViewModel category = new CategoryViewModel()
{
Id = categoryViewModel.Id,
Title = categoryViewModel.Title,
CaregoryParentId = categoryViewModel.CaregoryParentId,
Priority = categoryViewModel.Priority
};
return Json(category);
}
[HttpGet]
public IActionResult Edit(int id)
{
ViewData["categoryId"] = id;
return View();
}
查看:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="~/css/dataTable/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="~/js/dataTable/jquery.dataTables.min.js"></script>
<script src="~/js/dataTable/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
});
$('table.table').DataTable({
ajax:
{
"url": "/Admin/Category/GetCategoryById/"+ @ViewData["categoryId"] ,
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "id", "name": "Id", "autoWidth": true },
{ "data": "title", "name": "Title", "autoWidth": true },
{ "data": "caregoryParentId", "name": "CaregoryParentId", "autoWidth": true },
{ "data": "priority", "name": "Priority", "autoWidth": true },
],
scrollY: 200,
scrollCollapse: true,
paging: false
});
$('#myTable2').DataTable().search('New York').draw();
});
</script>
</head>
<body class="dt-example dt-example-bootstrap">
<div class="container">
<section>
<div class="demo-html"></div>
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#tab-table1" data-toggle="tab">Table 1</a>
</li>
<li>
<a href="#tab-table2" data-toggle="tab">Table 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-table1">
<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>CaregoryParentId</th>
<th>Priority</th>
</tr>
</thead>
</table>
</div>
<div class="tab-pane" id="tab-table2">
<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>CaregoryParentId</th>
<th>Priority</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</section>
</div>
推荐答案
有两个错误导致此问题.
There are two errors to cause this issue.
首先，jquery datatable需要字段名称为data的json，因为您应该通过阅读data在columns中接收json.
First, the jquery datatable needs the json which field name is data , because you should receive the json in columns by reading data.
另一种方法，jquery datatable应该获取的是 collection 的数据，而不是一种数据，尽管只有一个数据要返回，但应将其放入CategoryViewModel的列表中.
Another one, the jquery datatable should get the data of collection instead of one data, although you only have one data to return, you should put it in the list of CategoryViewModel.
如下更改您的GetCategoryById方法:
public IActionResult GetCategoryById(int id, int languageId = 0)
{
var categoryViewModel = _categoryRepository.GetCategory(id, languageId);
CategoryViewModel category = new CategoryViewModel()
{
Id = categoryViewModel.Id,
Title = categoryViewModel.Title,
CaregoryParentId = categoryViewModel.CaregoryParentId,
Priority = categoryViewModel.Priority
};
List<CategoryViewModel> categories = new List<CategoryViewModel>();
categories.Add(category);
return Json(new { data = categories });
}
这是结果:
这篇关于多标签数据表不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
