Datatables With Responsive details row getting data with link click

regalfish

HI,

I've been working on a custom use of the data-tables with the responsive plugin, and struggling with something i can't work out, have done a fair amount of searching but can't find a solution.

Basically its a data table with the responsive plugin enabled, that has multiple columns, and the last column, is a link to perform another action.

On this link i am trying to get the data of the current row, so i can use the data. It works until i enable responsive.

However this table doesn't fit on the page properly as there is too many columns, so i have enabled responsive plugin, so they gain the details below the row with the + button. But when the detail row is shown, the link code breaks because the table structure has changed.

The basic code for this example is below, I'm not sure how the structure changes on responsive row shown, so not sure what jquery selectors i should be using to get to the data.

$('#example').on('click', 'a.custom_action', function (e) {
    e.preventDefault();
    var tr = $(this).closest('tr');
        var row = table.row( tr );
    alert(row.data());
} );
} );

A full example jsfiddle to this issue, can be viewed by clicking https://jsfiddle.net/bx4s4p5b/3/ you can see the link works when responsive is disabled https://jsfiddle.net/bx4s4p5b/2/

any pointers in the right direction would be great.

cheers
Tim

regalfish

I managed to get this working by changing the code to
'''
$('#example').on('click', 'a.custom_action', function (e) {
e.preventDefault();
var data = dtappt.row( this ).data();
if (!jQuery.isEmptyObject(data)) {
//alert( 'You clicked on '+data.a_id+'\'s row' );
} else {
//alert('failed first check');
var tr = $(this).closest('tr');
var data = dtappt.row( tr ).data();

          if (!jQuery.isEmptyObject(data)) {
            //alert( 'You clicked on '+data.a_id+'\'s row' );
          } else {
            alert( 'Data empty' );
          }
        }

} );
} );
'''