When using select to filter "table.row( this ).data()" gives undefined

B!

Hi all,

I use below code to add an extra row with extra content.
To load the extra content I use an ID (available in my data as "data[7]"). This row with [7] is the only hidden field.

When I have my table with content and I click on the tr all works as expected.
When I use the "search" text field all works as expected.

When I use a <select> filter in my "thead" to shorten up the result, the filtering happens so all data (including data[7]) is available (using "$(document).on('change',...").
If now I click any row, I get following error:
"Uncaught TypeError: Cannot read property '7' of undefined"

If I replace the "this" with a row number (like in var test) I do get the data as expected...

Can anyone explain why the "this" in line 6 is suddenly not working anymore and hence resulting in an "undefined" value...

I can also try to go to read out the row number clicked but as the tables can be sorted it does not always match the result...
I hope somebody can help here.

Thanks!

$(document).ready(function(){
//Some more code
    var table = $('#product_data').DataTable();
    $('#product_data tbody').on('click', 'tr', function () {
//Using 'this' results in undefined when using select filter
      var data = table.row( this ).data();
var test = table.row( 2 ).data();
      var tr = $(this).closest('tr');
      var row = table.row(tr);
      if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
        $(this).css('background','');
      }
      else {
        //Show waiting animation when original row is clicked
        var check_tr = $(this).attr('role');
        if (check_tr == "row"){
          $('#loading_animation').show();
        }
        $.ajax({
          type: 'GET',
//here I need the data
          url: "extradata.php?id="+data[7],
          success: function (response) {
            row.child( response ).show();
            $('#loading_animation').hide();
          },
          error: function (xhr, ajaxOptions, thrownError) {
            row.child( 'Error loading content: ' + thrownError ).show();
          }
        });
        tr.addClass('shown');
        $(this).css('background','#74B3DD');
      }
    });
}

kthorngren

I copied the top part of your click event into a column select search example I have and it seems to work.
http://live.datatables.net/nuhesiba/1/edit

Maybe I don't understand your problem description. Can you put together a simple test case to show the issue or provide a link to your page?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin