Responsive Tables Extension: Collapse mode, entire row clickable?

Hi,

thanks for your post, and sorry for the trouble.

This JavaScript feature is based on the DataTables JS library, see https://datatables.net/extensions/responsive/
From what I know, it doesn’t have a direct mode to make the row the clickable target, but you could try achieving that with a little bit of extra JavaScript code, which you’d need to add to the page (e.g. below the table Shortcode):

<script>
jQuery( document ).ready( function( $ ) {
  $( '.tablepress' ).on( 'click', 'tr', function() {
    $( this ).find( '.column-1' ).trigger( 'click' );
  } );
);
</script>

Regards,
Tobias

I tried adding the code but it still doesn’t work. The whole row isn’t clickable. I tried clearing the cache. The code is there when I view the page source.

Any tips? I actually have the DataTables extension installed too if it makes any difference.

• This reply was modified 5 years, 10 months ago by Pluh.

Hi,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi, here’s an example: //removed

• This reply was modified 5 years, 10 months ago by Pluh.

Hi,

ah, it looks like there’s a typo in my code (a missing }), and we need a modification to avoid an infinite loop. Can you please try again with

<script>
jQuery( document ).ready( function( $ ) {
  $( '.tablepress' ).on( 'click', 'td:not(.column-1)', function() {
    $( this ).siblings( '.column-1' ).trigger( 'click' );
  } );
} );
</script>

Regards,
Tobias

Awesome! It works now. Thanks!

While I’m at it, is there some kind of a function I can use in my functions.php file that automatically inserts the code IF there’s a table present on the page?

Hi,

that’s great to hear!

Yes! You could try this:

add_filter( 'tablepress_all_datatables_commands', 'pluh_tablepress_add_responsive_row_click' );
function pluh_tablepress_add_responsive_row_click( $commands ) {
  $commands .= "$( '.tablepress' ).on( 'click', 'td:not(.column-1)', function() {
    $( this ).siblings( '.column-1' ).trigger( 'click' );
  } );";
  return $commands;
}

Regards,
Tobias