Django/django-tables2 html table on row click to edit form

Question

sorry this post may be messy not sure how do explain what I am looking for very well but here goes nothing.

I have a Django App and using django-table2 to print a data model to a table, the next thing I am looking to do it when the user clicks on the table row to redirect the page to a equivalent edit form

urls.py

path('', CustomerView.as_view(), name='customer'),
path('customer_edit/', views.customer_edit, name='customer_edit'),

tables.py

import django_tables2 as tables
from customer.models import Customer


class CustomerTable(tables.Table):
    account = tables.Column(attrs={'td': {'class': 'account'}})

    class Meta:
        model = Customer
        attrs = {'id': 'table'}
        exclude = ('is_deleted',)
        template_name = 'django_tables2/bootstrap-responsive.html'

views.py

from django.shortcuts import render
from django_tables2 import RequestConfig
from customer.models import Customer
from customer.tables import CustomerTable
from django.views.generic import TemplateView


class CustomerView(TemplateView):
    template_name = 'customer/customer.html'

    def get(self, request, *args, **kwargs):
        table = CustomerTable(Customer.objects.all().filter(is_deleted=False))
        RequestConfig(request).configure(table)
        return render(request, 'customer/customer.html', {'table': table})

    def customer_edit(request):
        return render(request, 'customer/customer_edit.html')

template

{% extends 'base.html' %}
{% load render_table from django_tables2 %}

{% block head %}
    <title>Dev Genie - Customers</title>
{% endblock %}

{% block body %}
    <div class="input-group col-md-6">
        <input type="button" class="btn btn-success" value="Add">
        <input type="button" class="btn btn-danger" value="Delete">
        <input class="form-control py-2" type="search" value="search" id="example-search-input">
        <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <span class="glyphicon glyphicon-search"></span>
        </button>
      </span>
    </div>
    {% render_table table %}
    <script>
        $(document).ready(function () {
            $('table:first').children('tbody:first').children('tr:first').css('background-color', '#0099ff');
            $('table tbody tr').bind("mouseover", function () {
                var colour = $(this).css("background-color");
                $(this).css("background", '#0099ff');

                $(this).bind("mouseout", function () {
                    $(this).css("background", colour);
                });
            });
            $('table tbody tr').click(function () {
                let account = $(this).closest('tr').find('td.account').text();
                alert(account);
                //on table row click event, pass back to django
            });
        });
    </script>
{% endblock %}

I am struggling to get the account code from the onclick even to pass the account code back to Django to move to the next page to begin editing the record

I really think I am barking up the wrong tree with this

any help would be very much appreciated

Viktor Johansson · Answer 1 · 2019-10-15T05:10:19.137

I couldn't find any solution that suits my needs.

All the solutions I found requires some weird processing in Javascript and parsing slugs and PK's from the table to redirect to the correct URL.

My solution?

Define an absolute URL in your models.py

def get_absolute_url(self):
    return reverse('product:detail', kwargs={'slug': self.slug})

Then in your tables.py, we add a data-href attribute to each column that we want to be clickable. This allows us to restrict which columns become clickable.

class ProductTable(tables.Table):
    clickable = {'td': {'data-href': lambda record: record.get_absolute_url}}
    name = tables.Column(attrs=clickable)
    in_stock = tables.Column(attrs=clickable)

    class Meta:
        model = Product
        fields = (name, in_stock)

And in your template just add this simple event listener,

$(document).ready(function($) {
    $("td").click(function() {
        window.location = $(this).data("href");
    });
});

Alternatively, if you just want the whole row to be clickable, just use Row attributes as defined in the docs,

class ProductTable(tables.Table):
    class Meta:
        model = Product
        row_attrs = {'data-href': lambda record: record.get_absolute_url}
        fields = (name, in_stock)

and then change your template script too

$(document).ready(function($) {
    $("tr").click(function() {
        window.location = $(this).data("href");
    });
});

score 1 · Answer 2 · answered Sep 16 '18 at 19:57

1

I think i may have found a implementation for the above.

Putting a click event for a dialogue box with Django Tables2

it is for deleting a row but the concept is the same

I will test and check

answered Sep 16 '18 at 19:57

Kieron Gilbey

41
1
1
4

score 1 · Answer 3 · answered Sep 21 '21 at 00:41

1

Simple code to do that on row click or col

row_attrs = {
        "onClick": lambda record: "document.location.href='/app/view/{0}';".format(record.id)
    }

if you want to use it on col use tables.Column Docs

answered Sep 21 '21 at 00:41

khaled-s

11
1
3

follows the documentation, worked right away. Thanks! – StackTheEast Mar 21 '22 at 20:40

score 0 · Answer 4 · edited Sep 18 '18 at 10:13

Ok after spending this evening on this, I have found a way to perform this action without adding the href tag into the python code,

by using Ajax I can get the account code from the table and then pass this through to the url

$('table tbody tr').click(function () {
    let account = $(this).closest('tr').find('td.account').text();
    window.location = account;
});

adding the primary key to the url.py

    path('<slug:account>/', views.customer_edit, name='customer_edit'),

and adding the customer_edit def to the views.py

def customer_edit(request, account):
    customer = get_object_or_404(Customer, pk=account)
    if request.method == 'POST':
        form = CustomerEdit(request.POST, instance=customer)
        if form.is_valid():
            customer.save()
            return redirect(reverse('customer:customer'))

    else:
        form = CustomerEdit(instance=customer)
        args = {'customer': customer, 'form': form}
        return render(request, 'customer/customer_edit.html', args)

this is the most optimum way I could find to redirect to another view from Django without having the url specified inside of the python file, I am 100% that there is better ways to do this but for now this will be the accepted answer

I think you are trying to solve a problem (not having the exact url) which you will regret later. I'd prefer using explicit urls over a multitude of places where urls are composed. I suggest adding `get_absolute_url` to your models and add the explicit url to the table rows using the `row_attrs` attribute/argument of the django-tables2 table. — Jieter, Sep 18 '18 at 10:18

score 0 · Answer 5 · answered Sep 29 '20 at 20:58

I may be a little confused about what you are trying to do. It seems like you are for some reason trying to have the view render a new response back from the click events on the table. That is why you are getting tripped up with all this JavaScript rendering. You should simply have those cells render as links that go to where you need them to.

Take a look at the django-tables2 documentation for TemplateColumn. You will want to just have it point to a template that creates the url given the record pk.

https://django-tables2.readthedocs.io/en/latest/pages/api-reference.html?highlight=templatecolumn#templatecolumn

tables.py
class CustomerTable(tables.Table):
    account = tables.TemplateColumn(template_name="_account.html")

    def render_title(self, record, value, column, bound_column, bound_row):
            value = self.value_title(record, value)
            return mark_safe(  # noqa: S308, S703
                column.render(record, self, value, bound_column, bound_row=bound_row)
            )



_account.html
<a href={% url('customer_edit', args=[record.pk]) %}>your text here</a>

Django/django-tables2 html table on row click to edit form

5 Answers5