'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