Clicking on a row, I get id is undefined

YoDavish

I have JSON data that is passed into DataTables. Each row is clickable, I want it to pass the the "id" from the row into a function that will perform an Ajax call (query function). However, I'm unable to get the "id" from the row itself. When I click on the row the alert pops up with "undefined id"

Below is my code.

[code]
// READY FUNCTION
$(document).ready(function() {
    var obj = $('#tempDataForm').serializeJSON();
    query('discrepancyList',obj,refreshDiscrepancyTable,0,"queryDiscrepancy.php");


});

function refreshDiscrepancyTable(response) {
    if(response.result.state == 'success') {
        var refreshedData = response.result.data.results;
        var colNames = response.result.data.colNames;
        console.log(colNames);

        if ( $.fn.DataTable.isDataTable('#discrepancyQueue') ) {
            $('#discrepancyQueue').DataTable().destroy();
        }

        $('#discrepancyQueue').DataTable( {
            data: refreshedData,
            // fnDrawCallback function
            "fnDrawCallback": function( oSettings ) {
                ```$('#discrepancyQueue').on( 'click', 'tr', function () {
                    var table = $('#discrepancyQueue').DataTable();
                    // Gets the row id value
                    var id = table.row( this ).id();
                    console.log("ID is "+id);
                    alert( 'Clicked row id '+id );
                });```
            },
            columns: colNames,
            // Datatables extension that will optimize table layout for different screen size through dynamic insertion and removal of columns from the table
            responsive: true,
            // Hides "Id" columns and makes it not searchable
            "columnDefs": [
                {
                    "targets":  [ 0 ],
                    "visible": false,
                    "searchable": false
                }
            ]
        } );

        var myTable = $('#discrepancyQueue').DataTable();
        notify('success','Test!');
    } else {
        notify('warn','Error!');
    }
}
[/code]

kthorngren

I think the problem is that you don't have the rowId setup. The row().id() docs state that is will use the value of rowId. The rowId docs state that it will default to DT_RowId if it is an object in your data. Otherwise you need to define it based on a column with unique data.

Kevin

tangerine

Try

 var id = table.row( this ).data().id;

YoDavish

I've updated the code to try to get the ".data().id;"

But still no luck, it still says "Undefined Id". The column Name is "Id" so I tried .data()Id as well but still no luck.

Code updated below:

var table = $('#discrepancyQueue').DataTable();
// Gets the row id value
var id = table.row( this ).data().id;
alert( 'Clicked row id '+id );

kthorngren

Do you have a column id in your columns: colNames, definition?

var id = table.row( this ).data().id; would look for id defined in columns.data. You can use something else from your columns.data.

Kevin

YoDavish

I got it to work now. Rather than targeting the specific column, I just got the entire data in the row and looked for the first column. Below is how it got it to work, even when the column itself is hidden.

var data = table.row( this ).data();
alert( 'Clicked row id '+ data[0]);