Django Edit Or Delete Selected Rows In A Table - ListView - django

Question

I have a table with checkboxes and I would like to be able to delete or edit a specific field value for all the selected rows in the table.
Here's an example table that would be awesome to recreate but I have not found examples anywhere how this may work in the view and template. https://examples.bootstrap-table.com/#
My current view, which is working with a table. Where can I start to make the leap from a basic table to an interactive one like in the example above?
Views.py
class EntryList(LoginRequiredMixin, ListView):
context_object_name = 'entry_list'
paginate_by = 100
# paginate_by = 5
#ordering = ['-pk']
model = Entry
template_name = "portfolios/entry_list.html"
def get_queryset(self):
return Entry.objects.filter(created_by=self.request.user).order_by('-pk')
def post(self, request, *args, **kwargs):
ids = self.request.POST.get('ids', "")
# ids if string like "1,2,3,4"
ids = ids.split(",")
try:
# Check ids are valid numbers
ids = map(int, ids)
except ValueError as e:
return JsonResponse(status=400)
# delete items
self.model.objects.filter(id__in=ids).delete()
return JsonResponse({"status": "ok"}, status=204)
entry_list.html
{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h2 class="text-gray-800">{% block title %}{% trans "Imported Entries" %}{% endblock %}</h2>
<a role="button" class="btn btn-success" href="{% url 'import' %}"><i
class="fas fa-plus-circle"></i> Import New Entires</a>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-md-12">
<div class="card shadow mb-4">
<div class="card-body">
<div id="dataTable_wrapper" class="dataTables_wrapper dt-bootstrap4">
<div class="row">
</div>
<div class="row">
<div class="col-sm-12">
<table class="table-responsive-xl table table-hover table-striped table-bordered dataTable" id="dataTable" width="100%"
cellspacing="0" role="grid" aria-describedby="dataTable_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">ID
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Date
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Trade
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Type
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Symbol
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Amount
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Price
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Fee
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Reg Fee
</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
colspan="1" aria-label="" style="">Ref
</th>
</tr>
</thead>
<tbody>
{% for entry in object_list %}
<tr role="row">
<td class="text-center">
<div class="custom-control-lg custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input form-control-lg" data-id="{{ entry.pk}}" id="check{{ entry.pk }}">
<label class="custom-control-label" for="check{{ entry.pk }}"></label>
</div>
</td>
<td>{{ entry.pk }}</td>
<td>{{ entry.date | date:"M d, Y h:i:s A"}}</td>
<td>{{ entry.trade.id }}</td>
<td>{{ entry.entry_type }}</td>
<td>{{ entry.symbol }}</td>
<td>{{ entry.amount }}</td>
<td>{{ entry.price }}</td>
<td>{{ entry.fee }}</td>
<td>{{ entry.reg_fee }}</td>
<td>{{ entry.transaction_id }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!--Pagination-->
<div class="row">
<div class="col-12 ">
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
« first
previous
{% endif %}
<span class="current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
last »
{% endif %}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}

Answer 1

It depends on how you've implemented your frontend, but assuming you have standard django templates, then I would suggest taking a look at datatables. There's quite a lot to it, but it is very stable and has a decent feature set, and the documentation is good. You can style it how you want using bootstrap.
Also, you link to Bootstrap Table - that should be the same principle. Read through the docs to understand how it works, and you will have to use Django template tags to render the data in the table.
Note that the table is implemented using HTML / Jquery, so it is not directly related to Django. All you need to do is to iterate over the django objects in your template (example)
EDIT
How to delete a selected row?
Suppose you could select N rows, and then click a button to delete all of these rows.
This could work as follows:
Add a handler to the delete button:
identify the selected rows
send an Ajax request to delete the rows
handle the success response to remove the deleted rows from the table
// SIMPLIFIED CODE SAMPLE
$("#delete-btn").click(function () {
var selectedRows = table.rows({"selected": true});
var dataObj = {
// parse selectedRows to get object ids
}
$.ajax({
url: '/api/delete-rows/',
type: 'post',
data: dataObj,
success: function (data, status, xhr) {
// remove the selected rows from the view
table.rows({"selected": true}).deselect().remove().draw();
}
})
}
How to select rows and quickly change a field for all of the selected rows?
The same principle here. Once rows are selected, have a handler which identifies the selected rows, then you can use the datatables api to update given fields (docs).