Question

I’m trying to link the items from a specific column, but each one will be linked for a different id from the json string. Unfortunately I can’t find a way to do this using the API (I know there is a lot of ways to do that without using the API ), but I’m looking for a way to link a item from a column (each one with a link for a specific id).

So here is my code, I use getJSON to get the JSON from the server, and I load the data from this JSON to the table like this:

$.getJSON("http://url.from/method?parameter=foo&callback=?", function(data)
    {
        var total = 0;
        $("#table_body").empty();
        var oTable = $('#mytable').dataTable(
            {
                "sPaginationType" : "full_numbers",
                "aaSorting": [[ 0, "asc" ]]
            }); 

        oTable.fnClearTable();

        $.each(data, function(i, item) 
        {
            oTable.fnAddData(
                [
                    item.contact_name,
                    item.contact_email
                ]
            );
        });
    });

What I want to do, is for each row, link the contact_name to its id, which is also in the JSON, and can be accessed inside this $.each loop by using item.contact_id.

Is there a way to do this using DataTables API, if yes, could you explain me and provide a good resource that will help me with this?

OBS: I’m using JSONP

Thanks.

---

UPDATE WITH MY NEW CODE:

The error now is, I’m getting the id when I click, but due to the fact that I’m processing the rows inside the $.each loop, for any row I click, it will always get the id of the last processed row.

var options = 
        {
            "sPaginationType" : "full_numbers",
            "aaSorting": [[ 0, "asc" ]],
            "aoColumns": [{
                "sTitle": 'Name',
                "sClass": "dtName",
            }, {
                "sTitle": 'Email',
                "sClass": "dtEmail",
            }, {
                "bVisible": false
            }],
        }

        var oTable = $('#table').dataTable(options); // Creates a new instance of the DataTable

        oTable.fnClearTable();

        $.each(data, function(i, item) 
        {

            oTable.fnAddData(
                [
                    item.contact_name , 
                    item.contact_email,
                    item.contact_id
                ]
            );

            var rowData = oTable.fnGetData(i); // fetch all the ids into this array
            $('#table tbody tr').click( function() 
            {
                window.location.href = "/panel/contacts/"+rowData[2];
            });
        });

Answer 1

Try it:

var options = {
    "sPaginationType" : "full_numbers",
    "aaSorting": [[ 0, "asc" ]],
    "aoColumns": [{
        "sTitle": 'Name',
        "sClass": "dtName",
    }, {
        "sTitle": 'Email',
        "sClass": "dtEmail",
    }, {
        "bVisible": false
    }],
}
var oTable = $('#mytable').dataTable(options);

This table will not display the id column, but you can get it like the following code:

var rowData = oTable.fnGetData(rowNode);

or

var rowData = oTable.fnGetData(0); // for the first one

console.log(rowData[0]);

You can’t get it by jQuery because it’s not displayed.

Edited: Sorry, I forgot one thing, when you use AddData put the item.contact_id on the third position:

oTable.fnAddData([
    item.contact_name,
    item.contact_email,
    item.contact_id
]);

If you want to get the id on click event do it:

jQuery('#mytable tbody tr').live('click', function() {
    var selectedRow = oTable.fnGetData(this),
        url = "/yourUrl/" + selectedRow[2];

    window.location.replace(url);
});