Not every row is clickable - what to do about it?

Not every row is clickable - what to do about it?

MKearMKear Posts: 2Questions: 1Answers: 0

I am using jquery and bootstrap 4.1. I have generated a table, that is sortable and searchable using the datatables plugin. I want to make each row clickable and I picked up a solution form stackoverflow that makes this work beautifully but only for the first 49 rows of the table whether or not the table has been resorted - (i.e. you click a column heading to resort the table, it still doesnt make the last row clickable)

Here's the code for a typical table row:

 <tr class="clickable-tr" href="/index.cfm?pid=111601&pgm=201851">
          <td>201851</td>
          <td>21/Dec/2018</td>
          <td>Carolina Blue / I Hear Bluegrass Calling Me / Pinecastle</td>
        </tr>

(the link is valid but i'm not sure if that would make a difference at this page)

Here's the CSS for the clickable-tr class:

<style>
    .clickable-tr{
  cursor: pointer;
}
    </style>  

and here's my jquery to enable the datatables plugin and the clickable row:

$(document).ready(function() {
        $('#results').DataTable( {
            "pageLength": 50        
        } );
                $('.clickable-tr').on('click', function(){
                 var myLink = $(this).attr('href');
                 window.open(myLink);
            });  
        
    } );

The only aspect of this whole thing that is connected with row 49 is that is the last row before the pagination takes you to page 2 but I can't see where I've missed something.

Can anyone else?

( Thanks in advance )

Mike Kear Windsor NSW, Australia

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @MKear ,

    There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

    Use a delegated event:

    $('table').on('click', '.clickable-tr', function(){
    

    See this FAQ.

    Allan

  • MKearMKear Posts: 2Questions: 1Answers: 0

    Thank you Allan. I read up on delegated events and now I've changed my javascript to be as follows:

    $(document).on('click', '.clickable-tr', function() {
              var myLink = $(this).attr('href');
              window.open(myLink);
            }); 
    

    and that does the trick. Click anywhere along a row, including rows on pages 2 and 3 etc and a new window will open with the website in the window. Exactly as I wanted. Thanks for your help!!!

    Cheers
    Mike Kear
    Windsor, NSW, Australia.

This discussion has been closed.