如何解决多标签数据表不显示数据
我已经在.net核心项目中创建了多选项卡数据表,但是该表未显示数据。 我在控制器操作中调试并返回数据,并且在Ajax成功函数中可以 但它不会显示在表格中,并且控制台中也没有错误。
有人可以帮助我吗?
非常感谢。
控制器:
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",{ "data": "caregoryParentId","name": "CaregoryParentId",{ "data": "priority","name": "Priority",],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>
解决方法
有两个错误导致此问题。
首先,jquery datatable
需要一个字段名称为data
的json,因为您应该通过阅读columns
在data
中接收到json。
另一种方法,jquery datatable
应该获得 collection 的数据,而不是一种数据,尽管您只有一种数据要返回,但应将其放在以下项的列表中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 });
}
这是结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。