pythondjangodjango-tables2

Custom Link on Column


I am working with django-tables2 to display some patient information on a page. I am creating the table like this:

class PatientListView(tables.Table):
    name = tables.Column('Practice')
    patientid = tables.Column()
    firstname = tables.Column()
    lastname = tables.Column()
    dob = tables.Column()
    addressline1 = tables.Column()
    addressline2 = tables.Column()
    city = tables.Column()
    state = tables.Column()
    zipcode = tables.Column()

    class Meta:
        template_name = 'django_tables2/bootstrap.html'

and then I am populating the table in my view with the result of an sql query like this:

table = PatientListView(patients)

I would like to ideally make each row of the table clickable so clicking anywhere on the table row would take me to a separate url defined by me. I would also settle for having a specific cell to click that would take me to a separate url.

I have seen the linkify option, but from what I've read of the documentation it looks like linkify does redirects to django model pages, but I am not using models for this database as the database is created and managed by another application, and I am just reading and displaying that information.

If django-tables2 is not the right solution for this issue I am open to hearing suggestions of other ways I can accomplish my goal.


Solution

  • Option 1: turn every column into a link

    You can make a callable that converts the record to the link, and add that to all columns, so:

    def get_link(record):
        return f'www.example.com/patients/{record.patientid}'
    
    
    class PatientListView(tables.Table):
        name = tables.Column('Practice', linkify=get_link)
        patientid = tables.Column(linkify=get_link)
        firstname = tables.Column(linkify=get_link)
        lastname = tables.Column(linkify=get_link)
        dob = tables.Column(linkify=get_link)
        addressline1 = tables.Column(linkify=get_link)
        addressline2 = tables.Column(linkify=get_link)
        city = tables.Column(linkify=get_link)
        state = tables.Column(linkify=get_link)
        zipcode = tables.Column(linkify=get_link)
    
        class Meta:
            template_name = 'django_tables2/bootstrap.html'
    

    Option 2: make the row clickable

    Another option is to generate a data-href attribute and use JavaScript then to make it behave like a link, with:

    def get_link(record):
            return f'www.example.com/patients/{record.patientid}'
    
    class PatientListView(tables.Table):
        name = tables.Column('Practice')
        patientid = tables.Column()
        firstname = tables.Column()
        lastname = tables.Column()
        dob = tables.Column()
        addressline1 = tables.Column()
        addressline2 = tables.Column()
        city = tables.Column()
        state = tables.Column()
        zipcode = tables.Column()
        
        class Meta:
            row_attrs = {'data-href': get_link}
    

    and then add some JavaScript:

        <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> 
        </script>
    
        $(function() {
            $('tr[data-href]').on('click', function() {
                window.location = $(this).data('href');
            });
        });
    

    and perhaps style the row with:

        tr[data-href] {
            cursor: pointer;
        }