Accessing data in a DataTable from a button click

Question

I can access the data row by the following simple method:

$('#received-body tr').click( function(){
    aData = received_table.fnGetData(this);
    selected_received_id = aData[0];
    alert( selected_received_id );
});

but I can't access them from the button called .received-update in one of the rows:

$('#received-body .received-update').click( function(){
    alert( 'update' ); // works
    aData = received_table.fnGetData( $(this).parents('tr')); // fails
    selected_received_id = aData[0];
    alert( 'update:' + selected_received_id );                      
});

Any help appreciated

Answer 1

You may need to use closest as parents() might be giving more then one rows. While closest get the first match up the DOM hierarchy.

aData = recieved_table.fnGetData($(this).closest('tr')); // fails

Answer 2

You can solve your problem by replacing

    aData = received_table.fnGetData($(this).parents('tr'));

with

    aData = received_table.fnGetData($(this).parents('tr')[0]);

This same syntax is also required for calls to received_table.fnGetPosition()

Answer 3

Below piece of code will help,

var table = $('#tableID').DataTable();
var row_data;
$('#tableID tbody').on( 'click', 'button', function () {
    row_data = table.row( $(this).parents('tr') ).data();
    console.log(row_data); // you will get the row data
});

Answer 4

aData = recieved_table.fnGetData($(this).parent('tr')); 

Try .parent() instead of .parents() because .parents() get the parent of each element in the current set of matched elements. .parent() will only work if the tr is a direct children of the tr. In that scenario .closest() will be ideal as shown below.

aData = recieved_table.fnGetData($(this).closest('tr'));

If above didn't work out for you, try filter method to reduce the set of matched elements.

Answer 5

@Stephen Brown, could you please provide the solution if you found how to get the value. I am having exactly the same problem. I have already tried all the ways in this post but no luck. I have the following code.

   "fnDrawCallback": function() {
        $(".select_row ").click(function(e){
            dataId = $(this).data("id");
            tr=$(this).closest("tr")[0];
            getSelected(tr, true);
        }); 
    }

and the function is (studentDataTable is the datatable)

    function getSelected(tr, tableLoaded){
        console.log($(tr));
        console.log(tr);            
        if (tableLoaded){
             data = studentDataTable.fnGetPosition($(tr));
        }
    }

The console.log print the following

  Object[tr.even]  and <tr class="even"> respectively

I tried $(tr) , tr and many other ways but it always throws the error TypeError: a.nodeName is undefined ...ta[d]!==m?c.aoData[d]._aData:null}return Y(c)};this.fnGetNodes=function(a){var b...

Any help is much appreciated

Edit
Got it working this way (not sure what I was doing wrong before)

      "aoColumnDefs": [
                 { "fnRender": function(oObj) {
                            return '<input  type="checkbox" onClick=getSelected(this);  data-id="' + oObj.aData.id + '" value="' + oObj.aData.id + '" />';
                        },
                "bSortable": false,
                "aTargets": [0]
                 },

and the function

    function getSelected(checkbox){ 
         console.log($(checkbox));
         if ($(checkbox).is(':checked')) {
              tr=$(checkbox).closest("tr")[0];
              console.log(tr);
              data = studentDataTable.fnGetData(tr);
              console.log(data['groupsList']);
            }
    }

share|improve this answer

edited Sep 26 '13 at 6:20

answered Sep 26 '13 at 4:00

Vijay KalidindiVijay Kalidindi

80110