Delete Multiple Records Using Jquey Ajax Python Flask PostgreSQL

In today’s video we will show you how to delete multiple records using Jquey Ajax Python Flask PostgreSQL

Subscribe: https://www.youtube.com/c/Cairocoders/featured

Source Code


#app.py
from flask import Flask, render_template, request, jsonify
import psycopg2 #pip install psycopg2 
import psycopg2.extras
  
app = Flask(__name__)
  
app.secret_key = "caircocoders-ednalan"
  
DB_HOST = "localhost"
DB_NAME = "sampledb"
DB_USER = "postgres"
DB_PASS = "admin"
      
conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST) 
 
@app.route('/')
def index(): 
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    cur.execute("SELECT * FROM employee ORDER BY id DESC")
    employeelist = cur.fetchall()
    return render_template('index.html', employeelist=employeelist)
  
@app.route("/delete",methods=["POST","GET"])
def delete():
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    for getid in request.form.getlist('checkdelete'):
        print(getid)
        cur.execute('DELETE FROM employee WHERE id = {0}'.format(getid))
        conn.commit()      
    cur.close()
    return jsonify('Records deleted successfully')
     
if __name__ == "__main__":
    app.run(debug=True)

templates/index.html


//templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Delete Multiple Records using Jquey Ajax Python Flask PostgreSQL</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>
</head>  
    <body>  
        <div class="container">  
            <br />
   <div class="table-responsive">  
    <h3 align="center">Delete Multiple Records using Jquey Ajax Python Flask PostgreSQL</h3><br />
    <div class="table-responsive">
        <div id="targetLayer" class="btn btn-success" style="display:none;width:100%;margin-bottom: 10px;"></div>
        <div id="loader-icon" style="display:none;"><img src="/static/img/loader.gif" /></div>
        <form id="deleteall" action="/delete" method="post">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th width="5%">
                                <input type="submit" value="Delete" name="delete_all" id="delete_all" class="btn btn-danger btn-xs" />
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Salary</th>
                        </tr>
                        </thead>
                        {% for row in employeelist %}
                            <tr>
                                <td>
                                    <input type="checkbox" name="checkdelete" id="checkdelete" class="delete_checkbox" value="{{row.id}}" />
                                </td>
                                <td>{{row.name}}</td>
                                <td>{{row.position}}</td>
                                <td>{{row.office}}</td>
                                <td>{{row.age}}</td>
                                <td>$ {{ "%.2f"|format(row.salary) }}</td>
                            </tr>
                        {% endfor %}    
                    </table>
        </form>        
                </div>
   </div>  
  </div>
<style>
.removeRow {background-color: #64b418;color:#FFFFFF;}
</style>
<script>  
$(document).ready(function(){ 
    $('.delete_checkbox').click(function(){
        if($(this).is(':checked')) {
            $(this).closest('tr').addClass('removeRow');
        }else{
            $(this).closest('tr').removeClass('removeRow');
        }
    });
    $('#deleteall').submit(function(event){
        if($('#checkdelete').val()){
            event.preventDefault();
            $('#loader-icon').show();
            $('#targetLayer').hide();
            $(this).ajaxSubmit({
                target: '#targetLayer',
                success:function(data){
                    $('.removeRow').fadeOut(1500);
                    $('#loader-icon').hide();
                    $('#targetLayer').show();
                    $('#targetLayer').html(data);
                },
                resetForm: true
            });
        }
        return false;
    });
});  
</script>
</body>  
</html>

#python #postgresql #flask