JQuery DataTables link item

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];
            });
        });

Ricardo Lohmann · Accepted Answer · 2012-04-13 00:20:29Z

2

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);
});

edited Apr 13, 2012 at 0:20

answered Apr 12, 2012 at 23:51

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

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

9 Comments

rogcg Over a year ago

Wait.. Where is the JSON items in this code? I can see that you are loading some text and translating it, but where to you load (as I've shown in my code before) item.contact_name and item.contact_email?

Ricardo Lohmann Over a year ago

So, you'll load on the same place, just modify your functions.

rogcg Over a year ago

BTW it says en4 is not defined, maybe I need to load this libs somewhere, where can I find it? And in my HTML code, I didn't declare the <tbody> tag, due to the fact that it will be generated by fnAddData. Correct?

Ricardo Lohmann Over a year ago

@rogcg No no, forget my en4.translate it's what I use to translate my js strings, I put it wrong, sorry.

rogcg Over a year ago

OK, now I'm getting the contact_id. But, it doesn't store the old id's loaded. So in the end, for every row I click, it will be always the id of the last row added. How to I get the id of the current row I'm clicking to?

|

Collectives™ on Stack Overflow

JQuery DataTables link item

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related