删除单行后如何使用ajax重新加载表

时间:2014-03-28 20:09:16

标签: javascript php ajax database

我在数据库中对随机值进行分页。现在我的分页已经完成,我正在研究如何删除一行,并且在没有刷新浏览器的情况下,当您单击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)+')">&lt;</button>';
                    }
                    paginationCtrls += '&nbsp; &nbsp; <b> Page '+pn+' of '+last+' &nbsp; &nbsp; ';
                    if(pn != last) {
                        paginationCtrls += '<button onclick="request_page('+(pn+1)+')">&gt;</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中尝试了echo&#39; request_page(1),但它没有用。空白页。那么告诉我们,我怎么能把我的桌子放回去?

1 个答案:

答案 0 :(得分:2)

定义一个全局变量,如;

var page = 1;

并在request_page函数中设置它;

function request_page(pn) {
    .....
    page = pn;
    .....
}

并在ajax结果后的supprimer函数调用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();
}