Edit and update HTML datatable Django

Question

I just builded a system in Django 1.10 that basically is a form that users can fill up and generates technical issues from orders. As seen in the picture below:

Once the issue is submitted to the database below is a table where all the issues appear:

This is my model:

class TechnicalValidationSystem(models.Model):
    user = models.ForeignKey(User)
    author = models.CharField(max_length=30)
    soss = models.CharField(max_length=30)
    case_opened = models.CharField(max_length=30)
    cause_reason = models.CharField(max_length=35)
    date_created = models.DateTimeField(blank=True, null=True)
    comments = models.CharField(max_length=500)
    issue_solved = models.BooleanField(default=False)

This is my HTML table:

 <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover dataTables-example" >
                                <thead>
                                    <tr>
                                        <th>SO-SS</th>
                                        <th>Case Opened</th>
                                        <th>Cause Reason</th>
                                        <th>Comments</th>
                                        <th>Date Created</th>
                                        <th>Created by:</th>
                                        <th>Issue Solved?</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for linea in lineas_de_reporte %}
                                    <tr>
                                        <td>{{ linea.soss }}</td>
                                        <td>{{ linea.case_opened }}</td>
                                        <td>{{ linea.cause_reason }}</td>
                                        <td>{{ linea.comments }}</td>
                                        <td>{{ linea.date_created }}</td>
                                        <td>{{ linea.author }}</td>
                                        <td>{{ linea.issue_solved }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>

                            </table>
                        </div>

What I need now is to find a way users can modify this table mainly if the issue was solved or not and to update my database with that response. Anyone know how to do this with just django? if not maybe use Jquery or anything else.

Let me know if you guys need something else or if I miss something, thanks you for your time.

Answer 1

[UPDATE]: Something like that in your HTML

<div class="table-responsive">
    <table class="..." >
        <thead>
            ...
        </thead>
        <tbody>
            {% for linea in lineas_de_reporte %}
                <tr>
                    ...
                    <td>
                        <form action="{% url 'view_name' %}" method="GET">
                            <input type="hidden" name="linea-id" value="{{ linea.id }}" />
                            <input type="submit" name="submit-issue-solved" value="Submit" />
                        </form>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

Yes, this can happen with Django only (and with jQuery if you like).

You should alter the ISSUE RESOLVED? column to a form where each cell (using the {% for %} loop, of course) will contain two radio buttons (Yes and No), a hidden one (with the value of a unique key. I guess SOSS is unique accross your db table?) and a submit button next to the radio ones.

Then, that form should submit itself (determined via the action={% url 'a_view_name_here' %} attribute) to a url and handled by a view. Inside that view you can get the value, user selected (depending on the method used, i.e request.GET.get('issue_resolved') or request.POST.get('issue_resolved')) and in the same way the value of the unique value (i.e SOSS).

Finally, you'll make a query to the db to get the TechnicalValidationSystem with that SOSS and update its issue_resolved boolean value (like this:

def issue_resolved(request):
    # if GET data contain a key named 'linea-id'...
    if request.GET.get('linea-id'):
        # ... this means that user clicked on the submit button
        # get the id of linea
        linea_id = request.GET.get('linea-id')
        # fetch object from db, based on that id (aka pk)
        linea = TechnicalValidationSystem.objects.get(id=linea_id)
        # change its attribute to True
        linea.issue_resolved = True
        # update db with the new value
        linea.save(update_fields=['issue_resolved'])
    return render(request, 'template/to/the/table.html', context_here)