【发布时间】：2023-03-11 22:25:01
【问题描述】：
我一直在学校里制作 CRUD 表，传统上是通过每页脚手架来制作的，我想试试我是否可以在不使用 Partial View 的情况下完成所有操作。我选择使用 AJAX，我在这里遵循了指南：https://dzone.com/articles/crud-operation-in-aspnet-mvc-using-ajax-and-bootst
一切都完美无缺，但我想使用 DataTable API 将搜索和排序功能添加到表中。这就是桌子的样子 HERE.
如您所见，它无法识别来自我制作的 JS 的数据，最明显的是“显示 0 到 0 个条目，共 0 个条目”。有没有办法将数据从 AJAX 加载到 DataTable 脚本？非常感谢！我将在下面提供我的代码。
编辑：我将 DataTable 初始化放在 Inventory.js 中，DataTable 有时会在页面加载时工作。尝试多次刷新页面时非常随机。我尝试在页面加载之前延迟，看看这是否有任何区别，但它不起作用。有人知道发生了什么吗？
库存（型号）
public List<Inventory> ListAll()
{
List<Inventory> lst = new List<Inventory>();
using (SqlConnection con = new SqlConnection(Helper.GetCon()))
{
con.Open();
string query = @"SELECT * FROM Inventory";
using (SqlCommand cmd = new SqlCommand(query, con))
{
using (SqlDataReader dr = cmd.ExecuteReader())
{
while (dr.Read())
{
lst.Add(new Inventory
{
InventoryId = Convert.ToInt32(dr["inv_id"]),
Category = Helper.Decrypt(dr["category_name"].ToString()),
Name = Helper.Decrypt(dr["item_name"].ToString()),
Details = Helper.Decrypt(dr["item_details"].ToString()),
Quantity = Convert.ToInt32(dr["quantity"]),
CsbCode = Helper.Decrypt(dr["csb_code"].ToString()),
Notes = Helper.Decrypt(dr["notes"].ToString()),
Location = Helper.Decrypt(dr["location"].ToString()),
DateCreated = DateTime.Parse(dr["date_created"].ToString()),
LastModified = DateTime.Parse(dr["last_modified"].ToString()),
});
}
return lst;
}
}
}
}
InventoryController.cs
public JsonResult List()
{
return Json(invDB.ListAll(), JsonRequestBehavior.AllowGet);
}
Inventory.js（我如何获取数据）
function loadData() {
$.ajax({
url: "/Inventory/List",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += '<td>' + item.InventoryId + '</td>';
html += '<td>' + item.Category + '</td>';
html += '<td>' + item.Name + '</td>';
html += '<td>' + item.Details + '</td>';
html += '<td>' + item.Quantity + '</td>';
html += '<td>' + item.CsbCode + '</td>';
html += '<td>' + item.Notes + '</td>';
html += '<td>' + item.Location + '</td>';
html += '<td>' + dateTimeFormat(item.DateCreated) + '</td>';
html += '<td>' + dateTimeFormat(item.LastModified) + '</td>';
html += '<td><a href="#" onclick="return getbyID(' + item.InventoryId + ')">Edit</a> | <a href="#" onclick="Delele(' + item.InventoryId + ')">Delete</a></td>';
html += '</tr>';
});
$('.tbody').html(html);
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
索引（DataTable 脚本）：
@section scripts {
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.uikit.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script>
$(document).ready(function () {
$('#user').DataTable({
dom: 'Bfrtip',
buttons: [
'print'
]
});
});
</script>
}
【问题讨论】：
-
我猜您的创建日期和上次修改日期是非标准日期格式。介意分享输出以查看其实际格式吗？ datatables.net/forums/discussion/45692/…
-
嗨 ghitesh！我认为您误读了标题，但数据显示在表格上，但 DataTable 无法识别数据，如我链接的图片所示 link
标签： javascript json ajax asp.net-mvc datatables