I have a datatable populated with aaData. There is this last column which is action that again is populated with an array.

What i need to do is, by clicking an action link, I should pick up the column array value for that specific row where i clicked the action.

The action column is populated with below json format

[
            {   
                "displayValue":"Browse",
                "link":"svnpath/BacklogApp",
                "displayIcon" : "browselogo"
            },
            {   
                "displayValue":"Source Code",
                "link":"svnpath/BackLog/trunk/webapp-project/",
                "displayIcon" : "svnlogo"
            },
            {   
                "displayValue":"Contributors: Vaibhav",
                "link":"#contributors",
                "displayIcon" : "people"
            }
        ]

This is my action column which has three links - browse, source code and contributor. When i click the contributor icon, i should be able to get "Contributors: Vaibhav" this string.

Below is the JS code

$(document).on('click', '.contributor', function(e)

    var aPos = tableAADataForContributors.fnGetPosition(this);
    alert(aPos);

    //if aPos returns an array in console, use first val at pos zero to get row data
    var aData = tableAADataForContributors.fnGetData(aPos[0]);
    alert(aData);

But on alert, my aPos is ing to be null whereas tableAADataForContributors is not null.

Also, this is how I am populating the datatable

$.ajax({
   type: "GET",
   url: url,
   dataType: "json",
   cache: false,
   contentType: "application/json",
   success: function(tablePropJSONData) {
     var oTable = $('#genericTable').dataTable( {
        "bProcessing": true,
        "aaData": tableObj,
        "sPaginationType"   : "full_numbers",
        "bJQueryUI"         : true,
        "bRetrieve"         : true,
        "bPaginate"         : true,
        "bSort"             : true,
        "aaSorting"         : [[ 2, "desc" ]],
        "iDisplayLength"    : 50,
        "bAutoWidth"        : false,
        "bStateSave"        : false,
        "aoColumns" : tablePropJSONData.aoColumns,
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            var lastColumnIndex = aData.length-1;
            var actionColumnContent = renderActionColumn(aData[lastColumnIndex]);
            $('td:eq('+lastColumnIndex+')', nRow).html(actionColumnContent);
        }
    }); 
    tableAADataForContributors = oTable; // initializing for picking up contributors from datatable.

    searchDataTable(oTable, searchTerm);
   },

And likewise initializing a global variable tableAADataForContributors to be able to use it in onclick event later.

I am not able to do so. Please someone suggest a javascript code.

I have a datatable populated with aaData. There is this last column which is action that again is populated with an array.

What i need to do is, by clicking an action link, I should pick up the column array value for that specific row where i clicked the action.

The action column is populated with below json format

[
            {   
                "displayValue":"Browse",
                "link":"svnpath/BacklogApp",
                "displayIcon" : "browselogo"
            },
            {   
                "displayValue":"Source Code",
                "link":"svnpath/BackLog/trunk/webapp-project/",
                "displayIcon" : "svnlogo"
            },
            {   
                "displayValue":"Contributors: Vaibhav",
                "link":"#contributors",
                "displayIcon" : "people"
            }
        ]

This is my action column which has three links - browse, source code and contributor. When i click the contributor icon, i should be able to get "Contributors: Vaibhav" this string.

Below is the JS code

$(document).on('click', '.contributor', function(e)

    var aPos = tableAADataForContributors.fnGetPosition(this);
    alert(aPos);

    //if aPos returns an array in console, use first val at pos zero to get row data
    var aData = tableAADataForContributors.fnGetData(aPos[0]);
    alert(aData);

But on alert, my aPos is ing to be null whereas tableAADataForContributors is not null.

Also, this is how I am populating the datatable

$.ajax({
   type: "GET",
   url: url,
   dataType: "json",
   cache: false,
   contentType: "application/json",
   success: function(tablePropJSONData) {
     var oTable = $('#genericTable').dataTable( {
        "bProcessing": true,
        "aaData": tableObj,
        "sPaginationType"   : "full_numbers",
        "bJQueryUI"         : true,
        "bRetrieve"         : true,
        "bPaginate"         : true,
        "bSort"             : true,
        "aaSorting"         : [[ 2, "desc" ]],
        "iDisplayLength"    : 50,
        "bAutoWidth"        : false,
        "bStateSave"        : false,
        "aoColumns" : tablePropJSONData.aoColumns,
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            var lastColumnIndex = aData.length-1;
            var actionColumnContent = renderActionColumn(aData[lastColumnIndex]);
            $('td:eq('+lastColumnIndex+')', nRow).html(actionColumnContent);
        }
    }); 
    tableAADataForContributors = oTable; // initializing for picking up contributors from datatable.

    searchDataTable(oTable, searchTerm);
   },

And likewise initializing a global variable tableAADataForContributors to be able to use it in onclick event later.

I am not able to do so. Please someone suggest a javascript code.

• javascript
• jquery
• json
• datatables

• 2 It's better to see your html table and JS code where you need to get a variable (click event?) on jsfiddle – Maxim Zhukov Commented Jul 8, 2013 at 7:31
• Give an example of your contributor's html. – The Alpha Commented Jul 8, 2013 at 7:42
• I have added JS code in the question. – roger_that Commented Jul 8, 2013 at 7:44
• 1 take a look stackoverflow./a/13682821/617373 – Daniel Commented Jul 8, 2013 at 7:56

1 Answer 1

Thankfully, I was able to solve it myself. Just a little bit of here and there was needed. Below code does the requirement

$(document).on('click', '.contributor', function(e){
    var aPos = tableAADataForContributors.fnGetPosition( $(this).closest('tr')[0]);

    //if aPos returns an array in console, use first val at pos zero to get row data
    var aData = tableAADataForContributors.fnGetData(aPos);

    var actionColumnData = aData[aData.length-1];

    $.each(actionColumnData, function(i, value){
        alert(value.displayValue)
    });