How to edit this hyperlink in a cell?

ferencvaros

Hi all,

I'm using the following code to show my datatable - and to make a cell clickable. How do I change the URL of that cell to be the data from the ID column? So that it becomes a href="edit/{id}"

$(function() {
  $('#budgettable').DataTable( {
    "ajax": {"url": "/budget/api", "dataSrc": "results"},
    "pagingType": "simple_numbers",
    "order": [[ 0, "desc" ]],
    "columns": [
      { "data": "id" },
      { "data": "name", class: "center",
        render: function (data, type, full, meta){
          return '<a href="edit/'+data+'" target=_blank>'+data+'</a>' // https://stackoverflow.com/questions/35547647/how-to-make-datatable-row-or-cell-clickable
          }
        }
      ]
  } );
} );

rf1234

just replace "+data+" in your URL with "+full.id+"

ferencvaros

Amazing, thanks!

ferencvaros

Just another thing. On line 8 it adds "center" to the column's class. Is there a way to add a class name to the table itself?

rf1234

https://datatables.net/reference/api/table().container()

Just scroll down to the example

Google helps ...

ferencvaros

Where should I add those four lines of code? In between line 14 and 15 of my example above?

colin

Yep, that would be the place, or you could add into initComplete if you want all the initialisation code tied together,

Colin

ferencvaros

I tried the following, but the table's class name didn't change. What have I missed / done wrong?

$(function() {
    var table = $('#budgettable').DataTable( {
        "class": "tester",
        "ajax": {"url": "/budget/api", "dataSrc": "results"},
        "pagingType": "simple_numbers",
        "order": [[ 0, "desc" ]],
        "columns": [
            { "data": "id" },
            { "data": "name", /*class: "center",*/
                render: function (data, type, full, meta)
                {
                    return '<a href="edit/'+full.id+'">'+data+'</a>' 
                }
            },
            { "data": "description" }
        ]
    } );
    $(table.table().container())
        .addClass('selectable');
} );

rf1234

Did you take a look at the div containing the table = the container? That div, not the table itself, should have the class.

You can assign a class to the table itself if you like just by putting it into your HTML or by using jQuery outside the Data Tables API.

Or take a look at this: https://datatables.net/reference/api/table()

table.table('#budgettable').addClass('selectable');

This should also work:

$('#budgettable').addClass('selectable');

Please also note: If you are using the API to assign the class you need to be sure the Data Table exists when you execute the code assigning the class! If you use simple jQuery with a selector that is already defined in your HTML you don't have that issue.

table.on('init', function() {
    $(table.table().container())
        .addClass('selectable');
})

The above code makes sure the data table exists when the class is assigned

colin

On top of that, this is an example using initComplete: http://live.datatables.net/xonupara/1/edit

Colin