javascript - Jquery datatables HTML actionlink,如何使用foreach添加编辑按钮
问题描述
我一直在努力解决这个问题,我不知道如何解决它。
我决定使用 DATATABLE 但我无法让它在我以前的模型上工作,一切正常,但编辑按钮甚至不起作用。不想使用 AJAX 或类似的东西,只是在我的 FOREACH 中检索到的信息
这是我的代码(请注意我使用了 foreach):
@model IEnumerable<WebApplication.Models.Approval>
@{
ViewData["Title"] = "Approvals";
}
<h1>Approvals</h1>
<table class="table" id="Exampledatatable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.CODE)
</th>
<th>
@Html.DisplayNameFor(model => model.EMAIL)
</th>
<th>
@Html.DisplayNameFor(model => model.FIRSTNAME)
</th>
<th>
@Html.DisplayNameFor(model => model.LASTNAME)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.CODE)
</td>
<td>
@Html.DisplayFor(modelItem => item.EMAIL)
</td>
<td>
@Html.DisplayFor(modelItem => item.FIRSTNAME)
</td>
<td>
@Html.DisplayFor(modelItem => item.LASTNAME)
</td>
<td>
@Html.ActionLink("EDIT", "Edit", new { id = item.code })
</td>
</tr>
}
</tbody>
</table>
问题出在我的脚本中
我试图使用这样的东西:
<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable({
aoColumns: [
null, // first column (CODE)
null, // second column (EMIAL)
null, // third (FIRSTNAME)
null, // fourth (LASTNAME)
{ // fifth column (Edit link)
"sName": "CODE",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj)
{
// oObj.aData[0] returns the CODE
return "<a href='/Edit?id="
+ oObj.aData[0] + "'>Edit</a>";
}
}
]
});
});
</script>
我怎样才能让它工作?可以帮我?
编辑:
@model IEnumerable<WebApplication.Models.Approval>
@{
ViewData["Title"] = "Approvals";
}
<h1>Approvals</h1>
<table class="table" id="Exampledatatable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.CODE)
</th>
<th>
@Html.DisplayNameFor(model => model.EMAIL)
</th>
<th>
@Html.DisplayNameFor(model => model.FIRSTNAME)
</th>
<th>
@Html.DisplayNameFor(model => model.LASTNAME)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.CODE)
</td>
<td>
@Html.DisplayFor(modelItem => item.EMAIL)
</td>
<td>
@Html.DisplayFor(modelItem => item.FIRSTNAME)
</td>
<td>
@Html.DisplayFor(modelItem => item.LASTNAME)
</td>
<td>
@Html.ActionLink("EDIT", "Edit", new { id = item.code })
</td>
</tr>
}
</tbody>
</table>
我正在使用它,但它不适用于 Jquery 数据表:
<td>
@Html.ActionLink("EDIT", "Edit", new { id = item.code })
</td>
如果我运行此代码,我的应用程序就可以正常工作:
@model IEnumerable<WebApplication.Models.Approval>
@{
ViewData["Title"] = "Approvals";
}
<h1>Approvals</h1>
<table class="table" id="Exampledatatable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.CODE)
</th>
<th>
@Html.DisplayNameFor(model => model.EMAIL)
</th>
<th>
@Html.DisplayNameFor(model => model.FIRSTNAME)
</th>
<th>
@Html.DisplayNameFor(model => model.LASTNAME)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.CODE)
</td>
<td>
@Html.DisplayFor(modelItem => item.EMAIL)
</td>
<td>
@Html.DisplayFor(modelItem => item.FIRSTNAME)
</td>
<td>
@Html.DisplayFor(modelItem => item.LASTNAME)
</td>
<td>
@Html.ActionLink("EDIT", "Edit", new { id = item.code })
</td>
</tr>
}
</tbody>
</table>
当我尝试使用 JS 和 HTML ACTION LINK 实现 DATATABLE 时,问题就来了。
@section scripts{
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/af-2.3.5/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/af-2.3.5/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#Exampledatatable').DataTable({
})
});
</script>
不管我怎么尝试都不能让它发挥作用
解决方案
推荐阅读
- elasticsearch - 如何使用 Java API 将弹性搜索过滤器查询与 OR 结合起来
- c# - 保持 Nuget 包始终使用最新的依赖项
- jquery - MDBootstrap 上的工具提示不会显示
- excel - 使用VBA中的for循环将数组保存在字典中
- react-native - 反应原生:2 壁画初始化之间的竞争条件
- javascript - 为什么全画布不重复绘制 SVG 图案?
- android - 不安全的 HTTP 在 Flutter 2.0.0 及更高版本中不起作用
- c# - GET 调用:已添加具有相同密钥的项目。键:ID
- python - 在 django 中下载和保存文档的问题
- spring - 如何在不使用存储库的情况下获取引用表