article

Sunday, June 19, 2022

PHP Mysqli Delete Multiple Rows using jQuery Ajax

PHP Mysqli Delete Multiple Rows using jQuery Ajax

Bootstrap 5 
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP Mysqli Delete Multiple Rows using jQuery Ajax</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1 class="text-center" style="margin-top:30px;">PHP Mysqli Delete Multiple Rows using jQuery Ajax</h1>
    <hr>
    <div class="row justify-content-center">
        <div class="col-8">
            <div class="alert alert-danger text-center" role="alert" style="display:none;">
                <span class="message"></span>
            </div>
            <div class="alert alert-success text-center" role="alert" style="display:none;">
                <span class="message"></span>
            </div>
            <button type="button" class="btn btn-danger" id="delete">Delete</button>
            <table class="table table-bordered" style="margin-top:15px;">
                <thead>
                    <th><input type="checkbox" id="checkAll"></th>
                    <th>ID</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Address</th>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//app.js
$(function(){
    fetch();
 
    //check uncheck all
    $('#checkAll').click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });
 
    $('#delete').click(function(){
        var ids = $(".check:checked").map(function(){
            return $(this).val();
        }).toArray();
 
        //check if a checkbox is checked
        if(jQuery.isEmptyObject(ids)){
            $('.alert').hide();
            $('.alert-danger').show();
            $('.message').html('Select row(s) to delete first');
        }
        //delete the checked rows
        else{
            $.ajax({
                type: 'POST',
                url: 'ajax.php?action=delete',
                data: {ids: ids},
                dataType: 'json',
                success: function(response){
                    $('.alert').hide();
                    $('.alert-success').show();
                    $('.message').html(response);
                    fetch();
 
                }
            });
        }
 
    });
     
});
 
function fetch(){
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        dataType: 'json',
        success: function(response){
            $('#tbody').html(response);
        }
    });
}
ajax.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//ajax.php
<?php
    //connection
    $conn = new mysqli('localhost', 'root', '', 'devprojectdb');
 
    $action = 'fetch';
    $output = '';
 
    if(isset($_GET['action'])){
        $action = $_GET['action'];
    }
 
    if($action == 'fetch'){
         
        $sql = "SELECT * FROM members";
        $query = $conn->query($sql);
 
        while($row = $query->fetch_assoc()){
            $output .= "
                <tr>
                    <td><input type='checkbox' class='check' value='".$row['id']."'></td>
                    <td>".$row['id']."</td>
                    <td>".$row['firstname']."</td>
                    <td>".$row['lastname']."</td>
                    <td>".$row['address']."</td>
                </tr>
            ";
        }
 
    }
 
    if($action == 'delete'){
        $output = array('error'=>false);
        $ids = $_POST['ids'];
        $count = count($ids);
        $row = ($count == 1)? 'Row' : 'Rows';
 
        foreach($ids as $id){
            $sql = "DELETE FROM members WHERE id = '$id'";
            $conn->query($sql);
        }
     
        $output = $count.' '.$row.' deleted';
 
    }
 
    echo json_encode($output);
 
?>

Posted by ednalan at 5:41 PM . Under , .

Related Post