[英]How to reload a table with ajax after deleting a single row
我正在對我的數據庫中的隨機值進行分頁。 現在我的分頁已經完成,我正在研究如何刪除一行,並且在沒有刷新瀏覽器的情況下,當你點擊X按鈕時,我想要一個confirm(),如果它還沒有,那行必須消失但我的表應該仍然在那里。
所以這是我的腳本:
<?php
include_once("connectDB.php");
$db = new Connect;
$db = $db->ConnectDB();
$st = $db->prepare("SELECT COUNT(id) FROM users WHERE type='Concessionnaire'");
$st->execute();
$res = $st->fetch(PDO::FETCH_NUM);
$total_rows = $res[0];
$rpp = 5;
$last = ceil($total_rows/$rpp);
if ($last < 1) {
$last = 1;
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
table,td {
padding:5px;
border:1px solid black;
}
table {
width:800px;
}
#pagination_controls {
width:200px;
float:right;
padding-bottom:15px;
}
#container {
width:850px;
margin:auto;
}
</style>
<script>
function request_page(pn) {
var rpp = <?php echo $rpp; ?>;
var last = <?php echo $last; ?>;
var results_box = document.getElementById("results_box");
var pagination_controls = document.getElementById("pagination_controls");
results_box.innerHTML = "Processing...";
var hr = new XMLHttpRequest();
hr.open("POST","pagination_parser.php",true)
hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
hr.onreadystatechange = function () {
if(hr.readyState == 4 && hr.status == 200) {
var dataArray = hr.responseText.split("||");
var html_output = "<table><tr><th></th><th>ID</th><th>username</th><th>password</th><th>e-mail</th><th>creer par:</th><th></th></tr>";
for(i=0;i<dataArray.length - 1;i++) {
var itemArray = dataArray[i].split("|");
html_output += "<tr><td><input type='submit' onclick=''; value='O'></td><td>"+itemArray[0]+"</td><td>"+itemArray[1]+"</td><td>"+itemArray[2]+"</td><td>"+itemArray[3]+"</td><td>"+itemArray[4]+"</td><td><input type='submit' onclick='javascript:supprimer("+itemArray[0]+");'; value='X'></td></tr>";
}
results_box.innerHTML = html_output;
}
}
hr.send("rpp="+rpp+"&last="+last+"&pn="+pn);
var paginationCtrls = "";
if(last != 1) {
if(pn > 1) {
paginationCtrls += '<button onclick="request_page('+(pn-1)+')"><</button>';
}
paginationCtrls += ' <b> Page '+pn+' of '+last+' ';
if(pn != last) {
paginationCtrls += '<button onclick="request_page('+(pn+1)+')">></button>';
}
}
pagination_controls.innerHTML = paginationCtrls;
}
function supprimer(id) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
if(confirm("Etes-vous sur?")) {
document.getElementById('container').innerHTML = xhr.responseText;
}
}
}
xhr.open("GET","supprimer2.php?id="+id,true);
xhr.send();
}
</script>
</head>
<body>
<div id="container">
<div id="pagination_controls"></div>
<div id="results_box"></div>
</div>
<script>request_page(1);</script>
</body>
</html>
這是我的supprimer函數php(在我的test.php中)
public function supprimer($id) {
$st = $this->db->prepare("DELETE FROM `phplogin`.`users` WHERE id='$id'");
$st->execute();
}
這就是我陷入困境的地方:
<?php
$id = $_GET['id'];
include_once('connect.php');
$obj = new User;
$obj->supprimer($id);
echo 'TABLE HERE';
?>
正如你所看到的,在ajax的幫助下,我可以做我的容器div id的innerHTML。 但首先,當你進入我的頁面時,我用javascript函數調用該表:request_page(1); 所以我嘗試在我的supprimer2.php中回顯'request_page(1),但它不起作用。 空白頁。 那么告訴我們,我怎么能把我的桌子放回去?
定義一個全局變量;
var page = 1;
並在你的request_page
函數中設置它;
function request_page(pn) {
.....
page = pn;
.....
}
並在你的supprimer
函數中調用ajax結果后的request_page
函數,
function supprimer(id) {
...........
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
if(confirm("Etes-vous sur?")) {
document.getElementById('container').innerHTML = xhr.responseText;
request_page(page); // Call to refresh table
}
}
}
xhr.open("GET","supprimer2.php?id="+id,true);
xhr.send();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.