Make rows in Django table clickable

Question

First off, I'm not a web developer. I'm just trying to write a simple web app for myself and I decided to do it in Django because I am very comfortable with Python. So I don't really know more than the basics of javascript.

Anyway, my main page is essentially a table using the django-tables2 library on the left side of the screen and a graph using the chart.js library on the right. I've got the skeletons of both of these up.

But now I cannot figure out to add click events to the rows in my table. What I'd like to do is have the graph updated whenever I click on a row in the table. All of the stuff I can find on it (for example: Adding an onclick event to a table row) has me going through things like table ids. But I don't know that there is a table id defined for this table. Because I'm using django-tables2, really the only lines I have specifically creating the table are

{% load render_table from django_tables2 %}
{% render_table table %}

The view I'm using looks something like

class RaceListView(SingleTableView):
    model = Race
    table_class = RaceTable
    template_name = 'prediction.html'

I'm not sure if this code helps at all or if there is some other code you need from me, so just ask if there is something that would make it easier to see what I'm doing. It's kind of difficult in Django though because things connect to each other all over the place.

If anyone has a simple example of how to add click events to tables like this handy, that would be rad. Thanks.

Usually it is good to give an example with your question, your question is far too general. People can only assume what your talking about, so assuming you currently have a html template that is displaying the data from django_table2 which doesn’t make much sense as Django model tables don’t usually start with django_ they start with appname_. Perhaps add your views.py and html template and people will be able to help more. p.s. google JavaScript click event and you will find the answer you are looking for. — rhys_gbs, Nov 25 '19 at 22:44
django-tables2 is a Python library and Django extension that allows you to quickly make tables from QuerySets. I've added the relevant parts of my html and views.py files though I don't know how helpful they are. — got it--thanks, Nov 26 '19 at 03:40

nigel222 · Answer 1 · 2019-11-26T10:44:34.543

It's a matter of generating <a ... tags in your HTML. There are two ways. One way is to supply a template that renders the table manually. The other is to create a property on your model that generates an appropriate tag as safe text. Something like

@property
def foo_link(self):
   return format_html(
       '<a href="foo/detail/{pk}" class="foo_link">details</a>',
        pk=self.foo.pk
   )

and tell your table generator to display the foo_link field. (On the queryset use select_related('foo') to avoid a query each time the property is used).

Just noticed that you are after attaching click events not links, but the principle is the same. Format the element in the table with a css class not used elsewhere (foo_link above), and put JQuery or whatever into the template to attach onclick events or whatever. Adding an attr data-foo="{pk}" or other information needed by the click handler is normally useful. You might use <span class="foo_link" data-foo="{pk}"> in place of <a...>.

If you want the whole row clickable, you will need to attach the onclick event to the <tr> tag. I don't know whether you can pass a desired css class to django-tables2. Otherwise a cell in the table can still be used, and your JQuery will identify the surrounding <tr> and attach the click handler to that (and copy the data-attr if that is helpful).

Make rows in Django table clickable

1 Answers1