asp.net-mvc - ASP.NET MVC 中的数据表自动刷新
问题描述
如您所见,我的视图中有这张表:
<table id="DataTable" class="table table-condensed">
<thead>
<tr class="headings">
<th >نام و نام خانوادگی </th>
<th></th>
<th>وقت ملاقات </th>
<th>ملاقات شونده </th>
<th>زمان ورود </th>
<th>زمان خروج </th>
<th>عملیات</th>
</tr>
</thead>
<tbody>
@foreach (ReferralTrafficView item in Model)
{
}
</tbody>
</table>
这是我的数据表配置:
<script>
$(document).ready(function () {
$('#DataTable').DataTable({
"paging": true,
"pageLength": 10,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "همه"]],
"ordering": true,
"processing": true,
"info": true,
"dom": "<'row'<'col-md-6 text-right'f><'col-md-6 text-left'>>"
+ "<'row'<'col-md-12'tr>>" +
"<'row'<'col-md-5 text-right rtl'p> <'col-md-7 text-left'i>>",
"language": {
"search": "_INPUT_",
"searchPlaceholder": "جستجو...", "sLoadingRecords": "در حال دریافت اطلاعات...", "sProcessing": "در حال پردازش...",
"lengthMenu": "نمایش _MENU_ ردیف در هر صفحه",
"zeroRecords": "موردی یافت نشد!",
"info": "نمایش صفحه _PAGE_ از _PAGES_",
"infoEmpty": "داده قابل نمایش موجود نیست.",
"infoFiltered": "(_TOTAL_ مورد از کل _MAX_ یافت شد)",
"oPaginate": {
"sNext": "<i class='fa fa-angle-left'></i>",
"sPrevious": "<i class='fa fa-angle-right'></i>"
}
}
});
});
</script>
我在模型中的数据每次都会更改,我想刷新我的数据表而不刷新。这是我的控制器:
public ActionResult MyReception(string Id)
{
List<ReferralTrafficView> rf = new List<ReferralTrafficView>();
get data from database
return rf
}
我可以在数据表配置中设置控制器以自动获取数据并刷新数据而不重新加载页面吗?
解决方案
您必须让您的 DataTable 从 ajax 源收集数据。DataTables 允许您配置将检索表内容的服务器端端点的 URL。然后添加一个 onclick 调用函数 table.ajax.reload() 的按钮。此外,您可能希望使用 setInterval() 定期自动调用此函数。
检查有关设置ajax 源和ajax 重新加载功能的文档。
另一种选择是更新表格的数据部分并重新绘制网格。 https://datatables.net/reference/api/draw()
推荐阅读
- rust - 比较 RefCell 中包含的值
- javascript - 如何在 Wordpress 上延迟嵌入 YouTube 视频的 javascript?
- python - 我需要使用 Python 登录 Goodreads
- python - 从单个 2D 视频重建飞行物体的 3D 轨迹
- javascript - 正则表达式在字符串中查找图像链接
- javascript - 如何在 Angular 2+ 中更改锚点的 html 元素后设置 @ViewChild('anchor_name')?
- c# - 正则表达式从字符串中提取时间信息
- javascript - onkeyup 函数只计算第一个数字。根据我的公式为什么?
- php - 从 shellscript 检索 cmd 到 php,但使用 pgsql select 或 ssh select
- flutter - Flutter Mobile 到 Flutter Web:Platform.operatingSystem 为浏览器返回 'android'