Multi-column editing with datatables

Using Django Forms & APIs
1

Hello everyone,

I have created a web framework on Django where I can do CRUD operations. With datatables, I can add and delete rows over json data. However, I want to change more than one column information at the same time. It seems easy to do this with the editor.

https://editor.datatables.net/examples/advanced/multiItem.html

But I don’t use php in my own code. Is it possible for me to integrate this editor into my own django code?

Thank you for help in advance.

home.html

 <table class="table table-striped table-bordered" id="example">
      <thead>
        <tr>
          <!-- samples table 24 columns and edit button-->
          <!-- <th>ID</th> -->
          <th class="action-color">Edit Button</th>
          <th>IDs</th>
          <th>Reception Date</th>
          <th>Hospital Date</th>
          <th>Culture</th>
          <th>Index_sample</th>
          <th>Is_index_sample</th>
          <th>Status</th>
          <th>Hosp. Samp. Num.</th>
        </tr>
      </thead>
      <!-- data from backend -->
      <!-- json response -->
    </table> <!-- end datatable -->
  </div> <!-- end container -->

models.py

class Samples(models.Model):

    # id = models.IntegerField(primary_key=True)
    p_id_s = models.CharField(max_length=128)
    reception_date = models.DateField()
    hospital_date = models.DateField()
    culture = models.CharField(max_length=128)
    index_sample = models.IntegerField(blank=True)
    is_index_sample = models.CharField(max_length=128)
    status = models.CharField(max_length=128)
    hospital_sample_number = models.CharField(max_length=256, blank=True)

views.py

def my_json(request):
    serializer = SamplesSerializer(Samples.objects.all(), many=True)
    response = {'data': serializer.data}

    return JsonResponse(response, safe=False)

base.html

var table = $('#example').DataTable({
          // json to fill the table rows and columns
          "ajax": {
            url: "/json",
            type: "GET"
          },
          columns: [
            // there are 105 columns at the table
            {"data": null,
              render: function ( data, type, row ) {
                return '<a class="btn btn-outline-success text-center" id="edit" title="Edit row" data-bs-toggle="modal" data-bs-target="#editModal"><i class="fa-solid fa-pen-to-square" style="color:green !important;"></i></a>';
              }
            },
            { data: 'p_id_s'},
            { data: 'reception_date'},
            { data: 'hospital_date'},
            { data: 'culture'},
            { data: 'index_sample'},
            { data: 'is_index_sample'},
            { data: 'status'},
            { data: 'hospital_sample_number'},
            {data: null,
              render: function ( data, type, row ) {
                return '<a class="btn btn-outline-danger text-center" id="delete" title="Delete row" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="fa-solid fa-delete-left" style="color:red !important;"></i></a>';
              }
            },
          ],
          paging: true,
          pageLength: 10,
          lengthChange: true,
          autoWidth: false,
          seaching: true,
          bInfo: true,
          bSort: true,
          orderClasses: false,
          order: [[ 0, "asc" ]],
          orderCellsTop: true,
          ...

In my model, there a few tabels which are linked to each other with one-to-many relation and there are more code in base.html that I don’t share here to prevent mess.

My point is that how can I integrate datatables-editor and php parts to django app? Any help would be great like if a similar situation has been discussed before, sharing a link or an example.

2

Hi, ı have same thing. Did you solve this problem? If you solved or found New way to do it, can you share? thank you :slight_smile: