刷新数据表而不重新加载页面
Posted
技术标签:
【中文标题】刷新数据表而不重新加载页面【英文标题】:Refresh DataTable without reloading page 【发布时间】:2021-01-07 14:17:55 【问题描述】:我正在尝试重新加载已插入选项卡的数据表。
请参考问题:AJAX Update DataTable after On Success
一个 php 类 userX.php 有 3 个带有客户端实现的数据表。我可以使用按钮更改第一个表的一行,一旦完成,记录将转到选项卡 2 -> 并且它的内容是表 2。我现在正在使用 AJAX 更改状态:
$(".changeStatus").click(function(event)
if(confirm("Are you sure changing status?"))
event.preventDefault();
var status = "In Production";
var id = $(this).attr('data-id');
$.ajax(
url : 'dbo.php',
method : 'POST',
data : status : status , id : id,
success : function(data)
$('tr#'+id+'').css('background-color', '#ccc');
$('tr#'+id+'').fadeOut('slow');
);
else
return false;
);
与此同时,它也必须在选项卡 2 表中进行更新。我尝试使用 div 内容来实现这一点;他们似乎都没有工作。我错过了什么?我愿意接受建议。
【问题讨论】:
【参考方案1】:表可以通过重新初始化数据表的方法简单地重新加载,也可以通过其内置的 AJAX 重新加载它。下面的代码块会有所帮助。
$(document).on('click','#ChangeNext',function(event)
if(confirm("Are you sure changing status?"))
event.preventDefault();
var statusid = $(this).attr('data-id');
$.ajax(
url : 'dbo.php',
method : 'POST',
data : statusid : statusid,
success : function(data)
$('#exampleone').DataTable().ajax.reload();
);
else
return false;
);
【讨论】:
【参考方案2】:使用 ajax 请求将数据放入 DataTables 的最佳方式是 DataTables ajax api,您可以在以下链接中看到它:
DataTables Ajax sourced data
jQuery 示例:
jQuery('.changeStatus').click(function(event)
$('#example').DataTable( ajax: 'data.json' );
);
JSON 示例:
"data": [
[
"Roshan Zaid",
"*** user",
"New member"
],
[
"AmirAli Esteki",
"*** and AskUbuntu user",
"New member"
]
]
你的 ajax 请求的响应默认应该是 json
【讨论】:
您好,感谢您的回复。主要的是数据表不是 AJAX 来源的,它只是 DOM。因此,当我请求 json 时,它会引发错误。此外,由于我在一页中有 3 个具有大量配置的表,因此无法将所有表重构为 ajax 源代码。 如果将基于 Ajax 源的数据表更改为唯一的解决方案,那么我必须从项目开始就更改整个概念。不过没关系,那我试试看。以上是关于刷新数据表而不重新加载页面的主要内容,如果未能解决你的问题,请参考以下文章
存储数据后是不是有更好的方法从 localStorage 获取数据而不刷新/重新加载页面