Django Datatable с Json Detail, Update и Delete View для каждой строки

Мне удалось создать таблицу данных с данными из JSON. Теперь я пытаюсь добиться того, чтобы добавить кнопки с Detail, Update и DeleteView для каждой строки. Пожалуйста, посмотрите прилагаемый код.

Мой вопрос в том, как я могу создать кнопки из JS в HTML шаблоне с определенными URL для каждой строки?

models.py

from django.db import models

class Employee(models.Model):
    GENDER = (
        ('M', 'M'),
        ('F', 'F')
    )
    id = models.IntegerField(primary_key=True)
    name = models.CharField(max_length=100)
    email = models.CharField(max_length=100)
    occupation = models.CharField(max_length=100)
    salary = models.CharField(max_length=100)
    gender = models.CharField(max_length=100, null = True, choices=GENDER)

    def __str__(self):
        return self.name

    def get_data(self):
        return {
            'id':self.id,
            'name':self.name,
            'email':self.email,
            'occupation':self.occupation,
            'salary':self.salary,
            'gender':self.gender,
            'option':self.gender,
        }

views.py

def home(request):
    employees = Employee.objects.all()
    return render(request,"home.html")

def employee_json(request):
    employees = Employee.objects.all()
    data = [employee.get_data() for employee in employees]
    response = {'data':data}
    return JsonResponse(response)

HTML

{% extends 'base.html' %}

{% block navbar-content %}
<i style="color: yellowgreen;" class="fas fa-user-alt"></i>&nbsp;&nbsp; Employee list
{% endblock navbar-content %}

{% block content %}


<div class="container novi_rn">
    <div class="modal fade" tabindex="-1" role="dialog" id="modal">
      <div class="modal-dialog modal-l modal-dialog-centered" role="document">
        <div class="modal-content"></div>
      </div>
    </div>
  </div>


    <div class="container">

      <button id="add-item-rn" class="btn btn-secondary gumb" type="button" name="button">DODAVANJE ARTIKALA</button>&nbsp&nbsp&nbsp

      <script type="text/javascript">
         $(document).ready(function() {

             $("#add-item-rn").modalForm({
                 formURL: "{% url 'create' %}"
             });
         });
      </script>

      <br><br><br>

          <table class="table table-bordered" id="example" style="text-align: center;">
            <thead class="table-success">
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Mail</th>
                <th>Occupation</th>
                <th>Salary</th>
                <th>Gender</th>
                <th>Option</th>
              </tr>

              <tr>
                <th></th>
                <th></th>
                <th style="text-align: center;"></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>

            </thead>

            <!-- DATA FROM JSON -->

          <tfoot>
            <tr>
              <th></th>
              <th></th>
              <th></th>
              <th style="text-align: center;"">UKUPNO:</th>
              <th style="text-align: center;"></th>
              <th></th>
              <th></th>
            </tr>
          </tfoot>

          </table>

    </div>
<br>
{% endblock content %}

JS

<script type="text/javascript">
  
      $(document).ready(function () {
        $('#example').DataTable({
          "ajax":"/json",

          "columns":[
            {"data":"id"},
            {"data":"name"},
            {"data":"email"},
            {"data":"occupation"},
            {"data":"salary"},
            {"data":"gender"},
            {"data":"option"}
          ], ...........

В JS файле, где у меня есть {"data": "option"}, который является последней колонкой моей таблицы данных, я хотел бы передать HTML кнопку с URL. У меня все еще не определены представления Detail, Update и Delete, потому что сначала я хочу понять, как передавать кнопки из js. Пожалуйста, помогите. Спасибо!

Вернуться на верх