How to fetch additional information(JSON data) present in the data object on data table row click

Question

This is the data returned by ajax call.

{
  "totalRecords": 20,
  "draw": 2,
  "data": [
    {
      "DT_RowId": "row_1",
      "first_name": "Tiger",
      "last_name": "Nixon",
      "addInfo": [
        {
          "city": "Texas",
          "familyDetails ": {
            "name1 ": "Arxin",
            "name2 ": "Drav"
          }
        }
      ]
    },
    {
      "DT_RowId": "row_2",
      "first_name": "Garrett",
      "last_name": "Winters",
      "addInfo": [
        {
          "city": "Texas",
          "familyDetails ": {
            "name1 ": "Rog",
            "name2 ": "Arim"
          }
        }
      ]
    }
  ]
}

This is the data table initialization, which uses server side pagination.

$(document).ready(function() {
 $('#example').DataTable( {
        serverSide: true,
    paging:true,
        ajax: "../php/staff.php",
        columns: [
            { data: "first_name" },
            { data: "last_name" }
        ]
    } );
    
      $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
});

Here, I want to get the additional information on data row click other than thae data table row data. How can I get the json "addInfo" associated with each row.

Note: Found an option to add as hidden variable, but keeping json as hidden is tedious.

You can check this link stackoverflow.com/questions/37316811/… — S N Sharma
– S N Sharma, Commented Aug 17, 2021 at 4:44
I am able to get the information on row click. In above mentioned json response, "first_name", "last_name" information is retrieved. THis "addInfo" value which is not present in data table, how can I retireve that on row click. — user630209
– user630209, Commented Aug 17, 2021 at 4:49
You have to put data somewhere. Check this example datatables.net/examples/ajax/null_data_source.html — S N Sharma
– S N Sharma, Commented Aug 17, 2021 at 4:56
As per the requirement I dont want to add any column extra for this. Is there any other way to achieve this without adding a click or extra column. — user630209
– user630209, Commented Aug 17, 2021 at 5:01
You don't want any extra column or hidden column. In my knowledge i can't say it is possible or not. — S N Sharma
– S N Sharma, Commented Aug 17, 2021 at 5:04

Doan Van Thang · Accepted Answer · 2021-08-17 13:45:24Z

1

+50

It's actually easier than you think, you can bind whole row data into it by using data: {}

$(document).ready(function() {
 $('#example').DataTable( {
        serverSide: true,
    paging:true,
        ajax: "../php/staff.php",
        columns: [
            { 
                data: {}, render: function (data) {
                    return data.first_name;
                }
            },
            { data: "last_name" }
        ]
    } );
    
      $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data.addInfo[0].city+'\'s row' );
    } );
});

answered Aug 17, 2021 at 13:45

Doan Van Thang

1,0071 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user630209 Over a year ago

Error : requested unknown parameter 'first_name' for row 0, column 0

Doan Van Thang Over a year ago

@user630209 Can you try to debug in the render function? or maybe add console.log(data) before return

Collectives™ on Stack Overflow

How to fetch additional information(JSON data) present in the data object on data table row click

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related