Data Table Row Undefined(DataTables.js)

Question

I am trying to access the id of a row inside my DataTables application. When I select a particular row, the row gets selected, after that when I hit the edit button on a menu that I have displayed on the website the id of the row should get passed to a url(which I took off because it was not working so I decided to console.log the info)

The problem is that the row id is coming back as undefined even though I can visually inspect that the id is there.

Here is the code:

$(document).ready(function(){
    var table = $('#example').DataTable({
        responsive: true,
        pagination: true,
        serverSide: false,
        processing: true,
        dom: '<"pull-left"f><"pull-right"l>tip',
        type: 'GET',
        sAjaxSource:'EquipmentList/list.asp',
        deferRender: true,
        //idDisplayLength: 10,
        select: true,
        colspan: 7,
        columns: [
            {"data": "documento"},
            {
                "data": "fecha_entrada"
            },
            {"data": "numero_control"},
            {"data": "nombre_cliente"},
            {"data": "linea_contenedor"},
            {"data": "estatus_actual"},
            {"data":"estatus_actual"}
        ],
        // add an id for each generated row:
        fnCreatedRow: function(nRow, nData, nId) {
            $(nRow).attr('id', nData['pk1']);
        }           
    }); // end of datatable creation

    $('#example tbody').on('click', 'tr', function() {
        if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
        } else {
          table.$('tr.selected').removeClass('selected');
          $(this).addClass('selected');
        }
      });
    $('#btnEdit').click(function () {
        var selectedRow = table.row('.selected').id();
        console.log(selectedRow);       
    });
});

For the selectedRow to show as undefined it must mean that the id is not being added to the datatable, but I know its there:

Answer 1

The id() method does not read the ID from the DOM. Instead of setting the id manually with the fnCreatedRow function use the rowId attribute. This sets the id Attribute in the DOM as well but also stores it internally for the use with the id() method.

So if you change the Datatables initialisation to something like this, your code works:

var table = $('#example').DataTable({
    responsive: true,
    pagination: true,
    serverSide: false,
    processing: true,
    dom: '<"pull-left"f><"pull-right"l>tip',
    type: 'GET',
    sAjaxSource:'EquipmentList/list.asp',
    deferRender: true,
    //idDisplayLength: 10,
    select: true,
    colspan: 7,
    rowId: "pk1",
    columns: [
        {"data": "documento"},
        {"data": "fecha_entrada"},
        {"data": "numero_control"},
        {"data": "nombre_cliente"},
        {"data": "linea_contenedor"},
        {"data": "estatus_actual"},
        {"data":"estatus_actual"}
    ]         
}); // end of datatable creation

And below a working sample:

        var table = $('#sample').DataTable({
            serverSide: false,
            searching: false,
            rowId: "id",
            data: [
                { "id": 5, "column-a": "Sample Data A", "column-b": 10, "column-c": "Lore ipsum" },
                { "id": 6, "column-a": "Sample Data B", "column-b": 5, "column-c": "Ipsum" },
                { "id": 8,  "column-a": "Sample Data C", "column-b": 38, "column-c": "Lore" }
            ],
            columnDefs: [
                {
                    targets: 0,
                    data: "id",
                    title: "id"
                },
                {
                    targets: 1,
                    data: "column-a"
                },
                {
                    targets: 2,
                    data: "column-b"
                },
                {
                    targets: 3,
                    data: "column-c"
                }
            ]   
        });

        $('#sample tbody').on('click', 'tr', function() {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            } else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });

        $('#edit').click(function () {
            var selectedRow = table.row('.selected').id();
            alert(selectedRow);       
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>

<button id="edit">Edit</button>
<table id="sample"></table>