Having issues with getting id from clickable row

nabberuk

I'm trying to get the ID (hidden column) when clicking on a row. Here's what i have that works but displays the first name and not the hidden column (ID)

I've uploaded the html/js here > http://live.datatables.net/pidijika/1/

It's using server side processing so won't display correctly on live.datatables.net

ignignokt

There are a few different ways to go about it. One way is on the server-side you can use DT_RowId in your query, and whatever you put in that will be the ID of the row. In this case if that is the only ID you care about for each row, it would make sense to do that.

As far as I can tell, row().data() seen here does not show the hidden cells, otherwise that would be an easy way.

The easiest way would probably be to just do this though, adding in fnCreatedRow and assign an attribute to each tr using the data of your hidden column. In this example, the data:"id" is your hidden column and has the data you want.

$('#example').DataTable({
    columns:[
        {sTitle:"Day",data:"day"},
        {sTitle:"Week",data:"week"},
        {sTitle:"Month",data:"month"},
        {sTitle:"Year",data:"year"},
        {data:"id",className:"never"}
    ],
    processing: true,
    serverSide: true,
    ajax: {
        url:"/myajaxurl",
        type:"POST"
    },
    fnCreatedRow: function( nRow, aData, iDataIndex ) {
        $(nRow).attr('my_custom_attr',aData['id']);
    }
});

$(document).on('click','#example tr',function(e){
    var id = $(this).attr('my_custom_attr');
});

larsonator

as ignignokt said, there are a couple of ways to do it.
My preferred method is a little different.

to make a table have select-able rows, i have an event handlers bound to the td elements of the table, and add a .selected class to the tr element (can use this to make it visibly selected as well).

defining your columns is a good way to know what the data variable will be defined as.

i also use the row function which accepts a tr element. for example

var etable = $("#example").DataTable({
    columns:[
        { data: "ID", class:"hidden" },
        { data: "Name" }
    ],
    serverSide: true,
});
//add selected class. You could use this if you didnt want the controll class to be used for //selection
$("#example tr td").on('click', function(){
    if($(this).is(":first-child"))
        return;
    if($("tr.selected", $(this).closest('tbody')).length>0)
        $(this).closest('tr').removeClass('selected');
    
    $(this).closest('tr').addClass('.selected');
});
//get data directly on click?
$("#example tr").on('click', function(){
    //get the ID
    var id = etable.row(etable.$(this)).data().ID;
    //get the Name
    var name = etable.row(etable.$(this)).data().Name;
});
//get data on a different event, maybe a button click
//if you getting a single selected data you want to make sure only one record is selected
$("button").on('click', function(e){
    e.preventDefault();
    if(etable.$("tr.selected").length!=1)
        return;

    //get the data
    var id = etable.row(etable.$("tr.selected")).data().id
});