如何将默认表格内容显示为不同，当点击按钮表格内容时，UI中的同一个表格应该不同？

I have a code to display users and I have a delete button for deleting user. When I delete any user, the deleted user will be removed from the user list. In the above I have two buttons one is for create user, and another is to show all deleted user. How can I show the deleted user when I click on "View Deleted User" button in the same below table where it was showing all the users.

enter image description here

Here below is the code

<body class="back-color">
    <div class="container">
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-7">
                        <h2><b>Manage Users</b></h2>
                    </div>
                    <div class="col-sm-3">
                        <a href="" class="btn btn-primary" data-toggle="modal"><i class="material-icons">info</i> <span>View Deleted Users</span></a>
                    </div>
                    <div class="col-sm-2">
                        <a href="crtusr.php" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> <span>Add New User</span></a>
                    </div>
                </div>
            </div>
            <?php
            if($no_of_users>1){
                echo '<table class="paginated table table-striped table-hover">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Role</th>
                        </tr>
                    </thead>
                    <tbody>';

                    while($userdetails = mysqli_fetch_array($user_details, MYSQLI_ASSOC)){
                       echo' <tr>
                            <td></td>
                            <td>'.$userdetails['username'].'</td>
                            <td>'.$userdetails['email'].'</td>
                            <td>'.$userdetails['role'].'</td>
                            <td>
                                <a href="" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                                <a href="" class="delete" name="delete" data-toggle="modal" Onclick="return ConfirmDelete()"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
                            </td>
                        </tr>';
                        }
                    echo '</tbody>
                </table>';
            }
            ?>
        </div>
    </div>
</body>

I think you need a soft delete option,

Steps:

  1. Create a field is_deleted, a boolean true if user is deleted and false if not which is false by default, in your users table.

  2. Now on Delete button's click make the is_deleted true.

  3. To list only undeleted users, query the table with condition is_deleted => false.

  4. To list deleted users, query the table with condition is_deleted => true.

  5. You can also give option for hard delete, which deletes user from table.

    You should do like,

    //if retrieving undeleted users from table 
$sql = "SELECT * FROM users from is_deleted = 0";

//else retrieving deleted users from table 
$sql = "SELECT * FROM users from is_deleted = 1";

//$con holding your database connection details 
$user_details= mysqli_query($con,$sql);

while($userdetails = mysqli_fetch_array($user_details, MYSQLI_ASSOC)) {
     // $userdetails array contains the data of a user
     // iterate it and fill your table accordingly
}

Hope this works.