当我通过ajax将新数据放入表时(使用局部视图)。我有新的数据到表中,但DataTable选项(显示条目,shearch,分页)不适用于此数据。这个选项仍然“看到”旧数据。 如何使用新数据刷新数据表选项,或者如何以数据表正常工作的方式将新数据放入表中?
PS。当我将整个div id="tabDiv"
置于parial中然后DataTables不起作用(我只有“裸”表没有DataTables)
我的观点:
<div id="tabDiv">
<br />
<table class="table" id="tab">
<thead>
<tr>
<th>Kody</th>
<th>Nadruk</th>
<th>Data Nadruku</th>
<th>Maszyna</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.actualCodesM)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Code)
</td>
<td>
@Html.DisplayFor(modelItem => item.Used)
</td>
<td>
@Html.DisplayFor(modelItem => item.DateUsed)
</td>
<td>
@Html.DisplayFor(modelItem => item.Machine)
</td>
<td>
@Html.ActionLink("Edytuj", "Edit", new { id = item.Id }, new { @class = "btn btn-info" })
@Html.ActionLink("Usuń", "Delete", new { id = item.Id }, new { @class = "btn btn-danger" })
</td>
</tr>
}
</tbody>
</table>
</div>
我的脚本:
$("document").ready(function ()
{
$('#tab').DataTable();
});
$('#btn').on('click', function ()
{
var codes = $('#codesCounter').val();
var machine = $('#machineList').val();
$.ajax({
url: '/ActualCodes/IndexTablePartial',
type: 'POST',
dataType: 'html',
cache: false,
contentType: 'application/json',
data: JSON.stringify({ codesCount: codes, machine: machine }),
//beforeSend: loadingShow,
})
.success(function (partialViewResult) {
$("#tab").html(partialViewResult);
})
.error(function (partialViewResult) {
alert('Error.');
});
});
我的部分:
<table class="table" id="tab">
<thead>
<tr>
<th>Kody</th>
<th>Nadruk</th>
<th>Data Nadruku</th>
<th>Maszyna</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.actualCodesM)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Code)
</td>
<td>
@Html.DisplayFor(modelItem => item.Used)
</td>
<td>
@Html.DisplayFor(modelItem => item.DateUsed)
</td>
<td>
@Html.DisplayFor(modelItem => item.Machine)
</td>
<td>
@Html.ActionLink("Edytuj", "Edit", new { id = item.Id }, new { @class = "btn btn-info" })
@Html.ActionLink("Usuń", "Delete", new { id = item.Id }, new { @class = "btn btn-danger" })
</td>
</tr>
}
</tbody>
我的控制器:
[HttpPost]
public ActionResult IndexTablePartial()
{
var actualCodesModel = mapper.Map(dbE.ActualCodes.Take(1000).ToList());
aCIIndexModel.actualCodesM = actualCodesModel;
return PartialView("IndexTablePartial", aCIIndexModel);
}
PS2。抱歉我的英文。
答案 0 :(得分:2)
移动用于将Datatable加载到部分视图的脚本,因为文档就绪事件将无法正常工作,因为DOM尚未准备好。
将以下代码添加到部分视图中:
-
答案 1 :(得分:0)
我还面临着同样的问题,即在添加@Manprit建议的代码后,数据表仍然“裸”了。但是我意识到代码必须如下所示
<script type="text/javascript">
$(document).ready(function () {
$('#datatable').DataTable();
});</script>
答案 2 :(得分:0)
<script type="text/javascript">
$("document").ready(function () {
$('#MyTable1').DataTable();
});
</script>
答案 3 :(得分:0)
我知道这是旧帖子,但是我只是遇到了类似的问题,这就是我的解决方法:
首先,我从nuget软件包管理器中下载了datatables插件。
@{
Layout = null;
}
//**this is what solved my issue**
@Scripts.Render("~/Scripts/DataTables/jquery.dataTables.min.js")
@Styles.Render("~/Content/DataTables/css/jquery.dataTables.min.css")
//////
<!DOCTYPE html>
<html>
<head>
</head>
<body>
//Your Table
</body>
</html>
<script>
$(document).ready(function () {
$('#example').DataTable({
});
});
</script>
我希望这对某些人有帮助。