Links within cells

dtriangle

Within my JSON Array I have an entry with a url 'slug',
another with a 'full name'.
I have the link part working with the columns.render method
however, I'd like to use 'full name' as the link text.
Is it possible to pull this data from the other column and then not display it as a column

Below is how I would expect to have it work, I hope it makes sense. I'm very new to JS.

    $('#example').DataTable( {
        "processing": true,
        "serverSide": false,
        "ajax": "example.com/json",
        "columns": [
            { "data": "name" },
            { "data": "company" },
            { "data": "profession" },
            { "data": "profession_other" },
            { "data": "location" },
            { "data": "slug" }
        ],
        "columnDefs": [ {
            "targets": 5,
            "data": "slug",
            "data_name": "name",
            "render": function ( data, type, row, meta ) {
                return '<a href="example.com/member/'+data+'" target="_blank">+data_name+</a>';
            }
          } ]
    } );

I've just edited a previous example to try and illustrate http://live.datatables.net/vijaqizi/1/

rf1234

I'd like to use 'full name' as the link text.
Is it possible to pull this data from the other column and then not display it as a column

Well there is no column "full name" or do you mean "full name" as a literal? What is "the other column"?

You could do something like this. Assuming that "name" is "the other column"

$('#example').DataTable( {
    "processing": true,
    "serverSide": false,
    "ajax": "example.com/json",
    "columns": [
       //  { "data": "name" }, if you don't want to show it any longer
        { "data": "company" },
        { "data": "profession" },
        { "data": "profession_other" },
        { "data": "location" },
        { "data": "slug",
          render: function ( data, type, row) {
               return '<a href="example.com/member/'+data+'" target="_blank">+row.name+</a>';
        }
    ]
} );

You can refer to all columns in "render" using the "row" parameter, e.g. row.name, row.company etc. The current column is "data", but in your case you could also refer to it as "row.slug".

dtriangle

Hey that's wonderful, rf1234 – Yes, my question was a bit confusing, I meant Name (the first column), should be the link and Slug should be added to the URL (then hide that col). Here's what I've used to get it working:

    $('#example').DataTable( {
        "processing": true,
        "serverSide": false,
        "ajax": "example.com/json",
        "columns": [
            { "data": "name" },
            { "data": "company" },
            { "data": "profession" },
            { "data": "profession_other" },
            { "data": "location" }
            // { "data": "slug" }
        ],
        "columnDefs": [ {
            "targets": 0,
            "render": function ( data, type, row, meta ) {
                return '<a href="example.com/member/'+row.slug+'" target="_blank">'+row.name+'</a>';
            }
          } ]
    } );

I still need to do this in columnDefs though to target the first column.

Thank you so much for your help.

rf1234

I still need to do this in columnDefs though to target the first column.

Of course you can use columnDefs but it is really not required

You could do this:

$('#example').DataTable( {
    "processing": true,
    "serverSide": false,
    "ajax": "example.com/json",
    "columns": [
        { "data": "name",
          render: function ( data, type, row) {
            return '<a href="example.com/member/'+row.slug+'" target="_blank">'+data+'</a>';
          }
        },
        { "data": "company" },
        { "data": "profession" },
        { "data": "profession_other" },
        { "data": "location" }
    ]
} );

or even this:

$('#example').DataTable( {
    "processing": true,
    "serverSide": false,
    "ajax": "example.com/json",
    "columns": [
        { "data": null,
          render: function ( data, type, row) {
            return '<a href="example.com/member/'+row.slug+'" target="_blank">'+row.name+'</a>';
          }
        },
        { "data": "company" },
        { "data": "profession" },
        { "data": "profession_other" },
        { "data": "location" }
    ]
} );

I had some curly brackets missing in my first reply. Sorry.

dtriangle

Ah ha, I get it now. Learning a lot along the way – thanks a boat load : )