'How render django-table when click on TamplateColumn delete button?
I try build user table with delete option I use django table2 to view the list and when I click on delete button and delete user I want to render only the table
list_of_user.html:
{% load static %}
{% load render_table from django_tables2 %}
{% load bootstrap4 %}
{% bootstrap_css %}
<link rel="stylesheet" href="{% static "userApp/list_of_user.css" %}" />
<div class="container">
{% block content %}
<div class="row">
{% if filter %}
<div class="col-sm-10">
<form action="" method="get" class="form form-inline">
{% bootstrap_form filter.form layout='inline' %}
{% bootstrap_button 'filter' %}
</form>
</div>
{% endif %}
<div id="table-user" class="col-sm-10">
{% render_table table %
</div>
</div>
{% endblock %}
</div>
userTable.py
from django.contrib.auth.models import User
import django_tables2 as tables
class Bootstrap4Table(tables.Table):
email = tables.EmailColumn()
username = tables.Column()
first_name = tables.Column()
last_name = tables.Column()
option = tables.TemplateColumn(
template_name="userApp/delete_button.html",
orderable=False,
verbose_name=''
)
class Meta:
model = User
template_name = 'django_tables2/bootstrap4.html'
fields = ('email', 'username', 'first_name', 'last_name', 'option')
attrs = {"class": "table table-hover", "icon": "bi bi-trash"}
delete_button.html
{% load static %}
{% load bootstrap4 %}
{% bootstrap_css %}
<button data-toggle="tooltip" onclick="destoryUser({{record.id}})" title="Please note that deletion cannot be undone"
type="submit" class="btn-sm btn-primary">delete <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/>
</svg>
</button>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
function destoryUser(record_id) {
console.log("record_id", record_id)
url = "../user_detail/" + record_id
console.log("url:", url)
$.ajax({
beforeSend: function(xhr){xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');},
url: url,
type: 'DELETE',
success: (data) => {
$("#"+record_id).remove()
},
error: (err) => {
console.log("error", err);
}
});
}
</script>
I delete the row that I want delete but I want to keep the same amount of lines on the page all the time without refreshing the page
url.py path("user_detail/", views.user_detail, name="user_detail")
view.py
@api_view(['GET', 'POST', 'DELETE'])
def user_detail(request, pk):
if request.method == 'GET':
try:
user = User.objects.get(pk=pk)
except User.DoesNotExists:
return Response({'error': 'User not found'}, status=status.HTTP_404_NOT_FOUND)
serializer = UserSerializer(user)
return Response(serializer.data)
if request.method == 'PUT':
serializer = UserSerializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data)
else:
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
if request.method == 'DELETE':
user = User.objects.get(pk=pk)
user.delete()
return Response(status=status.HTTP_204_NO_CONTENT)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|