CODEWITHSUNDEEP
pythondjangodjango-tables2
Alex Childs
Alex Childs

Reputation: 85

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.

Upvotes: 1

Views: 50

Answers (1)

willeM_ Van Onsem
willeM_ Van Onsem

Reputation: 477523

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;
    }

Upvotes: 1

Related Questions