成功后的AJAX更新数据表 [英] AJAX Update DataTable after On Success
问题描述
我在userX.php上有一个数据表.其中有三个标签，每个标签都包含一个表格. (表1，表2和3) 方案在选项卡1和2的每一行上都有一个操作按钮，单击该按钮会将特定行使用AJAX移至下一个表/选项卡，以防止页面加载.下图是表格
I have a datatable on userX.php. which has three tabs and each tab contains a table. (table1 table2 and 3) Scenario is there is an action button on each rows in tab 1 and 2, when it is clicked it will move the particular row to the next table / tab using AJAX for preventing page load. below image is the table
使用AJAX，我将更改表中的状态列，以推入下一个选项卡.下面是jquery ajax部分
using AJAX I would be changing the status column in the table in order to push into the next tab. below is the jquery ajax part
$(".changeStatus").click(function(event){
event.preventDefault();
var status = "SECOND STATUS";
var id = $(this).attr('data-id');
$.ajax({
url : 'dbo.php',
method : 'POST',
data : {status : status , id : id},
success : function(response){
//Where I tried to reload the DIV Body on Success, but it not loading at all
$("#loadContent").load("userX.php", response);
}
});
});
我的dbo.php是//忽略SQL注入
and my dbo.php is // IGNORE SQL INJECTION
$host = "localhost";
$username = "root";
$password = "";
$dbname = "database";
$conn = mysqli_connect($host, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
if(isset($_POST['status'])){
$status = $_POST['status'];
$id = $_POST['id'];
$sqlstatus= "update order set status = '$status' where id=".$id;
$result = mysqli_query($conn, $sqlstatus);
if($result){
echo('record status is changed');
}
}
从userX.php的主体ID中捕获到loadContent元素，如下所示，以便每次点击都会更新.
the loadContent element is caught from the userX.php's body id as below to update per every clicks.
<body id="loadcontent">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<img class="navbar-brand" href="userX.php" src="logo.png">
//The three tables and tabs would be followed
</body>
状态在此更改后，内容将刷新，但没有选项卡.就像我将选项卡2的状态更改为选项卡3一样，活动的选项卡会跳回到选项卡1，但选项卡3的内容已更新.表示状态已更改，实时已更新.错误出在导航栏上.
Once the status is changed here, the content is refreshed but without the tabs. as in if I change the status of tab 2 to tab 3, the active tab jumps back to tab one but with tab 3 updated contents. meaning the status is changed, and real time updated. The error is in the navigation pills.
由于项目兼容性，我不想从另一个类加载表主体.但欢迎提出建议.还有其他方法可以实现此目的，以便在不加载操作后立即刷新表?
I do not want to load my table body from another class due to project compatibility. But open for suggestions. is there any other way to implement this to keep the table refreshed right after the action without loading?
推荐答案
处理完函数后，我尝试重新初始化数据表，而不会发生任何中断.它像魅力一样工作.
I tried reinitializing the datatable once the function is processed without any interruptions. It worked like charm.
$(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)
{
//WHERE IT WORKED
$('#exampleone').DataTable().ajax.reload();
}
});
}
else{
return false;
}
});
这篇关于成功后的AJAX更新数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
