Accessing hidden column on click event.

GeoJunkie

(DataTables debugger reference: ewawow)

I have a data source which includes ID numbers. I want to keep the ID number hidden, but need to use it when the user clicks on it. I built the following based on the examples:

$(document).ready( function () {
var table = $('#example').DataTable({
"columnDefs": [
{"visible":false, "targets":[0] }
]
});

$('#example tbody').on('click', 'tr', function () {
    var name = $('td', this).eq(0).text();
    alert( 'You clicked on '+name+'\'s row' );
} );

} );

(The full example with sample data is in the reference). Column 0 is the ID column. The next column is the name. It displays the name. How can I access the ID column from the click event?

Rpiechura

I didn't encounter this specifically, but I did something similar so I'm hoping it may help you. What I was messing around with is reordering the columns, but always wanting to get the id when I click on the table, my click event is similar to yours except I extracted it into its own function called SelectedRow while passing 'this' in.

function selectedRow(This) {
    var table = $(This).closest('table').dataTable();
    oTable = table;

    if ($(This).hasClass('row_selected')) {
        $(This).removeClass('row_selected');
    }
    else {
        oTable.$('tr.row_selected').removeClass('row_selected');
        $(This).addClass('row_selected');

        var data = oTable.fnGetData(This);
        var oSettings = table.fnSettings();
        return getRowID(oSettings, data);
    }
}

getRowID is another function that I use to actually get the contents of the id field

function getRowID(oSettings, data) {
    for (var i = 0; i < data.length; i++) {
        var col = oSettings.aoColumns[i].sTitle;
        if (col.toLowerCase().indexOf('id') != -1) {
            return data[i];
        }
    }
}

Rpiechura

Sorry for the improper code formatting, I couldn't for the life of me figure out the new system and how to get it to post correctly. I miss the [code] [/code] blocks, they made it very simple.

allan

@Rpiechura - Its markdown, so you can use three ` characters to signal the start and end of a code block.

@GeoJunkie - The cell().data() method sounds like what you want. Something like table.cell( this, 0 ).data() will give you the data for the cell in column index 0, for row this.

Allan

GeoJunkie

Hmmm...can't get either of those to work. I did try implementing the cell().data() method, but it doesn't seem to work. Here's the code from my system (since I seem to have messed up the sample code above).

                    $(function() {
                        var opportunityTable = $("#dataTable").dataTable({
                            "ajax" : {
                                "url": "opportunitiesJson.json?json=1",
                                "dataSrc": ""
                            },
                            "deferRender" : true,
                            "columns":[
                                { "data":"id" },
                                { "data":"sponsor" },
                                { "data":"title" },
                                { "data":"deadline" }
                            ],
                            "columnDefs": [
                                { "visible" : false, "targets": [0] }
                            ],
                            "order" : [[ 3, "asc" ]]
                        });
                        
                        $("#dataTable tbody").on('click', 'td', function () {
                            console.log(opportunityTable.cell(this,0).data());
                        });
                    });

My console log shows "Uncaught TypeError: undefined is not a function" at the cell().data() call line when I click the DataTable.

GeoJunkie

OK...I figured out that I fell for the old "dataTable" vs "DataTable" mistake. Fixed that but it still doesn't work. When I use table.cell(this).data() as in the example on the documentation, it gives the cell I click on, but when I use table.cell(this,0).data() as given by Allen, it returns "undefined".

GeoJunkie

Got it! The click event needs to point to the row. This code worked:

                    $(function() {
                        var opportunityTable = $("#dataTable").DataTable({
                            "ajax" : {
                                "url": "opportunitiesJson.json?json=1",
                                "dataSrc": ""
                            },
                            "deferRender" : true,
                            "columns":[
                                { "data":"id" },
                                { "data":"sponsor" },
                                { "data":"title" },
                                { "data":"deadline" }
                            ],
                            "columnDefs": [
                                { "visible" : false, "targets": [0] }
                            ],
                            "order" : [[ 3, "asc" ]]
                        });
                        
                        $("#dataTable tbody").on('click', 'tr', function () {
                            console.log(opportunityTable.cell( this, 0 ).data());
                        });
                    });

Thanks!

allan

Good to hear that works. You can use the cell as a cell selector as well:

    $("#dataTable tbody").on('click', 'td', function () {
        console.log(opportunityTable.cell(this).data());
    });

See cell-selector.

Allan

GeoJunkie

Yes, but that only returns the cell the user clicked on. To get the hidden 0 column, I had to use the row selector.

allan

Duh - sorry. That was fairly daft of me. Not thinking right! :-).

Allan