table.row(this).data() is undefined, but works if I provide a row index

jbassos

     var trackData = $('#trackData').DataTable({
        ajax: {
            url:'http://localhost:3000/api/players/tracking', 
            dataSrc: '',
            mDataProp: '',
        },
        aoColumns: [
            {mData: '_date', render: function(data, type, row){
                return new Date(data).toLocaleTimeString();
            }},
            {mData: '_rsn'},
            {mData: '_loc'},
            {mData: '_duels', render: function(data, type, row){
                let wins = data.filter(duel => duel.result).length;
                return (data.length > 0) ? (100.0 * wins / data.length).toFixed(2) + ' ' + '%' : 'N/A';
            }},
            {mData: '_duels', render: function(data, type, row){
                return data.length;
            }},
            {mData: '_duels', render: function(data, type, row){
                let latest = data[0];
                return (latest) ? new Date(latest.date).toLocaleTimeString() : 'N/A';
            }},
            {mData: '_duels', render: function(data, type, row){
                let latest = data[0];
                return (latest) ? latest.opponent : 'N/A';
            }},
            {mData: '_duels', render: function(data, type, row){
                let latest = data[0];
                return (latest) ? ((latest.result) ? 'Win' : 'Loss') : 'N/A';
            }}
        ],
        aaSorting: [], 
        scrollY: '480px',
        scrollCollapse: true,
        paging: false
    });

  $('#trackData').on('click', 'tbody tr', () => {
        var data = trackData.row(this).data();
        console.log(data);
    });

setInterval(function() {
        trackData.ajax.reload(null, false);
    }, 3000);

I'm trying to get the data at the clicked row, however it always seems to return undefined. If I provide a row index, it logs the correct data. All of the solutions seem to use 'this' or '$(this)' however it is not working here. 'this' returns the document.

kthorngren

I think the problem is you are using an arrow function. My understanding is that this is handled differently with arrow functions. The arrow function will use the this value from the enclosing scope which is likely why you are seeing it as the document. You will need to use a regular function like this:

  $('#trackData').on('click', 'tbody tr',  function () {
        var data = trackData.row(this).data();
        console.log(data);
    });

See this example:
http://live.datatables.net/dogipuco/1/edit

Kevin