Question

我想在ajax成功之后刷新我的桌子

＆＃13;

function deleteUser(id){
    $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {'submit':id}, // An object with the key 'submit' and value 'true;
        success: function (result) {
            alert(result)
        }
    }); 
    
}

＆＃13;

<table id="table-demo" style=" border:1px solid #00CCFF!important;" class="table  table-striped">
    <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>pass</th>
            <th>email</th>
            <th>level</th>
            <th>status</th>
            <th>last login</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php
        $usersQry="select * from admins";
        $usersQryResult=mysqli_query($dbCnn,$usersQry);
        $c=1;
        while($user=mysqli_fetch_array($usersQryResult)){
            echo"
            <tr>
                <td>$c</td>
                <td>$user[user]</td>
                <td>$user[pass]</td>
                <td>$user[email]</td>
                <td>$user[level]</td>
                <td>$user[status]</td>
                <td>$user[lastlogin]</td>
                <td><i class='fa fa-pencil-square-o' title='delete'></i></td>
                <td>**<i onclick=\"deleteUser($user[id])\" class='fa fa-trash-o ' title='edit'></i>**</td>                    
            </tr>
            ";
            
            $c++;
        }
        ?>
        
        <!--insert.php -->  
        if(isset($_POST['submit'])){
            $idval=$_POST['submit'];
            $query="delete from admins where id=$idval";
            $result=mysqli_query($dbCnn,$query) or die("error 100");
            echo mysqli_affected_rows($dbCnn);
            echo "## $idval";
        }
        
    </tbody>
</table>

＆＃13;

＆＃13; 点击后删除已发布id值的用户insert.php从数据库的admins表中成功删除。 ajax成功后如何刷新表？

Answer 1

你必须做

将函数调用为deleteUser($user[id],this)

function deleteUser(id,thisObj){
           $.ajax({
            url: 'insert.php',
            type: 'POST',
            data: {'submit':id}, // An object with the key 'submit' and value 'true;
            success: function (result) {
            alert(result);
            //if success
            $(thisObj).parents("tr:first").remove();
            }
        }); 

}

Answer 2

有两种方法可以实现这一目标：

1）您传递了您单击的元素，并在jQuery中使用它来查找要从表中删除的行：

HTML / PHP

// ...
<td><i onclick=\"deleteUser($user[id], this)\" class='fa fa-trash-o ' title='edit'></i></td>
// ...

jQuery的：

function deleteUser(id, element) {
    $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {'submit':id}, // An object with the key 'submit' and value 'true;
        success: function (result) {
            $(element).parents("tr").remove();
        }
    }); 
}

此解决方案非常简单，并且不需要从当前代码重构太多

2）一旦您更新了数据库，您的insert.php将返回表格，并替换HTML中的旧表格

generate_table.php

<table id="table-demo" style=" border:1px solid #00CCFF!important;" class="table  table-striped">
    <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>pass</th>
            <th>email</th>
            <th>level</th>
            <th>status</th>
            <th>last login</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php
        $usersQry="select * from admins";
        $usersQryResult=mysqli_query($dbCnn,$usersQry);
        $c=1;
        while($user=mysqli_fetch_array($usersQryResult)){
            echo"
            <tr>
                <td>$c</td>
                <td>$user[user]</td>
                <td>$user[pass]</td>
                <td>$user[email]</td>
                <td>$user[level]</td>
                <td>$user[status]</td>
                <td>$user[lastlogin]</td>
                <td><i class='fa fa-pencil-square-o' title='delete'></i></td>
                <td>**<i onclick=\"deleteUser($user[id])\" class='fa fa-trash-o ' title='edit'></i>**</td>                    
            </tr>
            ";

            $c++;
        }
        ?>  
    </tbody>
</table>

insert.php

<?php
if(isset($_POST['submit'])){
    $idval=$_POST['submit'];
    $query="delete from admins where id=$idval";
    $result=mysqli_query($dbCnn,$query) or die("error 100");
}

include('generate_table.php);
?>

HTML / PHP

<div id=tableContainer">
    <?php
    include('generate_table.php');
    ?>
</div>

jQuery的：

function deleteUser(id) {
    $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {'submit':id}, // An object with the key 'submit' and value 'true;
        success: function (result) {
            $("#tableContainer").html(result);
        }
    }); 
}

此解决方案需要一些重构，但您确定您的表将始终反映当前注册的数据

Answer 3

查看DataTables插件，他有一些很好的自动刷新工具和其他东西http://www.datatables.net/

我建议在ajax调用之后重新加载表，以确保所有内容保持同步，这对于这个插件来说非常容易

ajax成功后刷新表

3 个答案: