Deleting multiple rows using checkbox in Django frontend

Question

I am going to implement a multi delete (via select boxes) view in Django.

I know there's a view in django.contrib.admin.actions but I can't port this to the frontend.

I was looking for an example (for Django view + HTML) but couldn't find any.

1)How to create multiple delete object using checkbox and single delete button in the list page. 2)What are the changes in list , delete view and list.html page

views.py

def Agent_List(request, id=None): #list items
  queryset =  Agent.objects.order_by('id')
  #queryset = Agent.objects.all()   
  query = request.GET.get('q')
  if query:
      queryset=queryset.filter(
            Q(Aadhaar_Number__icontains=query) |
            Q(PAN_Number__icontains=query) |
            Q(Account_Number__icontains=query) 
            ).distinct()
  context = {
    "object_list": queryset, 
    "Full_Name ": "Agent_List",

  }
  return  render(request, "customer/Agent_List.html", context)


def Agent_Delete(request, id=None):
    instance = get_object_or_404(Agent, id=id)
    instance.delete()
    messages.success(request, "Successfully deleted")
    return redirect("customer:Agent_List")

list.html

  {% extends "layout.html" %}
  {% load staticfiles %}
  <head>  
  </head>
  <body>
    <div id="wrapper">
      <div id="page-wrapper" class="gray-bg">
        {% block content %}
        <div class="row wrapper border-bottom white-bg page-heading">
          <div class="col-lg-10">
            <h2>Agent </h2>
            <ol class="breadcrumb">
              <li><a href="index.html">Manage My Wallet</a></li>
              <li><a>Agent Management </a></li>
            </ol>
          </div>
          <div class="col-lg-2"></div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
          <div class="row">
            <div class="col-lg-12">
              <div class="panel panel-primary">
                <div class="panel-heading">
                  Agent Profile List
                </div>
                <div class="panel-body">
                  <div>
                    <form method='GET' action=''>
                      <input type='text ' name='q' placeholder='search' value="{{request.GET.q}}"/>
                      <input type='submit' value=' Search '/>
                    </form>
                    <table class="table" >
                      <thead>
                        <tr>
                          <th></th>
                          <th>ID</th>
                          <th data-hide="phone">Full Name</th>
                          <th data-hide="phone">Agency Name</th>
                          <th data-hide="phone">Date Of Birth</th>
                          <th data-hide="phone">Agency Code</th>
                          <th data-hide="phone">Agent Status </th>
                          <th class="text-right">Action</th>
                        </tr>
                      </thead>
                      {% for obj in object_list %}
                      <tbody>
                        <tr>
                          <td><input type="checkbox"  name="instance" value="{{obj.id}}" >
                          <td>
                            <a href='#' data-toggle="collapse" value="{{obj.id}}">
                              {{ obj.id }}
                          </td>
                          <td><a href='#demo' data-toggle="collapse">{{ obj.Full_Name }}</a></td>
                          <td><a href="#demo" data-toggle="collapse">{{ obj.Agency_Name}}</a></td>
                          <td><a href="#demo" data-toggle="collapse">{{ obj.Date_of_Birth}}</a></td>
                          <td><a href="#demo" data-toggle="collapse">{{ obj.Agency_Code}}</a></td>
                          <td><a href="#demo" data-toggle="collapse"><span class="label label-primary">{{ obj.Agent_Status}}</span></a></td>
                          <td class="text-right">
                            <!-- <div class="btn-group">
                              <a  href='{{ obj.get_absolute_url }}' class="badge badge-warning" role="button">View</a>
                              <a  href="{% url 'customer:Agent_Edit'  obj.id %}" class="badge badge-info" role="button">Edit</a>
                              <a  href="{% url 'customer:Agent_Delete'  obj.id %}"  class="badge badge-danger" role="button">Delete</a>
                              </div> -->
                            <a  href='{{ obj.get_absolute_url }}' class="btn btn-warning btn-circle" type="button"><i class="fa fa-list-alt" aria-hidden="true"></i></a>
                            <a  href="{% url 'customer:Agent_Edit'  obj.id %}" class="btn btn-info btn-circle" type="button"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                            <a  href="{% url 'customer:Agent_Delete'  obj.id %}" class="btn btn-danger btn-circle" type="button"><i class="fa fa-trash" aria-hidden="true"></i></a>
                          </td>
                        </tr>
                      </tbody>
                      {% endfor %}
                      <tfoot>
                        <tr>
                          <td colspan="7">
                            <ul class="pagination pull-right"></ul>
                            <input type="submit" name="delete" value="Delete Items" />
                          </td>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div  id="demo" class="collapse"  value="{{obj.Full_Name}}">
              <div class=" col-md-5 col-lg-5 ">
                {% for obj in object_list %}
                <table class="table table-user-information">
                  <tbody>
                    <tr>
                      <td> Full Name :- </td>
                      <td>{{ obj.Full_Name }}</td>
                    </tr>
                    <tr>
                      <td>Date of Birth :-</td>
                      <td>{{ obj.Date_of_Birth }}</td>
                    </tr>
                    <tr>
                      <td>Phone Number:-</td>
                      <td>{{ obj.Phone_Number }}</td>
                    </tr>
                    <tr>
                      <td>Account Number :- </td>
                      <td>{{ obj.Account_Number}} </td>
                    </tr>
                    <tr>
                      <td>PAN  Number :- </td>
                      <td>{{ obj.PAN_Number }} </td>
                    </tr>
                    <tr>
                      <td>Aadhaar Number :-</td>
                      <td>{{ obj.Aadhaar_Number }}</td>
                    </tr>
                    <tr>
                      <td>Agent Name :- </td>
                      <td>{{ Agent_Name }}</td>
                    </tr>
                    <tr>
                      <td>Agency Name :- </td>
                      <td>{{ Agency_Name }} </td>
                    </tr>
                    <tr>
                      <td>Agency Code :- </td>
                      <td>{{ Agency_Code }} </td>
                    </tr>
                    <tr>
                      <td>Agent Status :- </td>
                      <td>{{ Agent_Status }} </td>
                    </tr>
                  </tbody>
                </table>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        <div class="footer" >
          <div><strong>Copyright</strong></div>
        </div>
      </div>
    </div>
  </body>

please tell hint

i khow how to get get checkbox value.but i didnot no how to delete checkbox values\ — damini
– damini, Commented Dec 29, 2016 at 13:06

chatuur · Accepted Answer · 2016-12-30 07:55:56Z

2

Okay, let's go through this step by step.

1) You want the Agent_Delete function to receive data from the frontend (a list of IDs for the objects to be deleted). So you need to register the function with a url in urls.py (I am assuming you have done this already).

This should something like the following in urls.py:

from .views import *

urlpatterns = [
    url(r'^delete_agent/$', Agent_Delete),
... #Along with other urls
]

2) From the front-end you want to POST the data to the view you have created above. To POST data you need a form. So, encapsulate the table in a form. It should look something like:

<form action="{% url 'delete_agent'%}" method="POST">
{% csrf_token %} <- You will need to pass this token

<!--Table with checkboxes goes here-->
...

</form>

Now, you have a form which will try to POST the input to a particular URL which is mapped to a view. Let's handle the view.

@csrf_exempt #Add this too. 
def Agent_Delete(request, id=None):

    if request.method == 'POST': #<- Checking for method type
        id_list = request.POST.getlist('instance')
    #This will submit an array of the value attributes of all the                
    #checkboxes that have been checked, that is an array of {{obj.id}}

        # Now all that is left is to iterate over the array fetch the   
        #object with the ID and delete it. 

        for agent_id in id_list:
            Agent.objects.get(id=agent_id).delete()

answered Dec 30, 2016 at 7:55

chatuur

1,28714 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rohit Kumar Over a year ago

I just tried your method, and it worked flawlessly, but is there anyway we can use multiple getlist line if we want to do different stuff to different lists? e.g. ``` delete_list = request.POST.getlist('delete-instance')``` . I tried doing this but I needed to add another checkbox for every list operation I had. I even put up a question for it: stackoverflow.com/questions/56626985/…

Collectives™ on Stack Overflow

Deleting multiple rows using checkbox in Django frontend

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related