datatable: failed to retrieve row data

zipper

I used bellow to display extra contents out of the datatable for a selected row since there were too many fields to fit in the table:

        if (json.show_extra_contents) {
          $('#tbody1').on('click', function () {
            var row = table.row($(this).closest('tr'));
            $('#information').empty();
            for (var i = 0; i < json.tb_fields.length; i++) {
              $('#information').append(json.tb_titles[i] + ': ' + row.data()[json.tb_fields[i]] + '<br>');
            }
          });
        }

and it returned error:
"Uncaught TypeError: Cannot read property 'customer.id' of undefined"
The test case is at 54.199.175.35/5 --> "Customer Mgmt" please help, thanks.

zipper

I made it work by:

        if (json.show_extra_contents) {
          $('#tbody1').on('click', function () {
            $('#information').empty();
            for (var i = 0; i < json.tb_fields.length; i++) {
              $('#information').append(json.tb_titles[i] + ': ' + table.row({selected: true}).data()[json.tb_fields[i]] + '<br>');
            }
          });
        }

kthorngren

Looks like you fixed your issue while I was responding :-)

Kevin

zipper

Thanks for the quick response @kthorngren, Actually now I changed the code to:

if (json.show_extra_contents) {
  $('#tbody1').on('click', function () {
    $('#information').empty();
    var tb = table.row({selected: true}).data()[json.tb_name];
    var keys = Object.keys(tb);
    for (var i = 0; i < json.tb_fields.length; i++) {
      $('#information').append(json.tb_titles[i] + ': ' + tb[keys[i]] + '<br>');
    }
  });
}

And now the problem is no matter which row I click, it only shows the contents of the first row. May you take a look at the test case 54.199.175.35/6

kthorngren

I believe that you will need to use the select extension in order for selected: true in table.row({selected: true}) to work.

Another option, not requiring additional JS, to get the data from the selected row is this:

var tb = table.row($(this)).data();

EDIT: almost forgot you probably need to change your click event to:
.on('click', 'tbody tr', function ()

Kevin

zipper

With these together it finally worked. thank you for support Kevin.