Datatable with JSON data, undefined rowData onClick

quantdonny

Hi DataTables,

C# programmer here, but just getting into html and Javascript. Loaded up a Datatable, with Bootstrap Metronic Keen Themes ( https://keenthemes.com/keen/?page=docs&section=datatable ). Can't get on click event to work. Hope someone can help.

Html:

<div class="mytable"></div>

Javascript:

function createNewAssetDatatable(jsonSource)
{
    var datatable = $('.mytable').KTDatatable({
    data: {
      type: 'local',
      source: jsonSource,
      pageSize: 10,                
    },                
    layout: {
        scroll: true,
        height: 400,
        footer: false,
        icons: {
            rowDetail: {
                expand: '',
                collapse: ''
            }
        }
    },    
    sortable: true,
    filterable: false,
    pagination: false,    
    columns: [
        {
        field:'Asset', title: 'Asset', autoHide: false },
        { field:'YTD', title: 'YTD', autoHide: false},
        { field:'Chart', title: 'Chart', autoHide: false}
    ],                    
    rowId: 'Asset'    
    });

    $('.mytable').on('click', 'tr', function(){
        var rowData = datatable.rows( this ).data();
        console.log( 'You clicked this' );
        console.log(rowData[0]);    
    });    
    return datatable;
}

// Initialization.
var dataJSONEquities = JSON.parse(
            '[{"Asset":"S&P500","YTD":"+3%","Chart":"1"},\n' +
            '{"Asset":"Hang Seng","YTD":"-0.15%","Chart":"1"},\n' +
            '{"Asset":"Shanghai Comp","YTD":"+2.4%","Chart":"1"},\n' + 
            '{"Asset":"China A50","YTD":"-5%","Chart":"1"}]'
        );

var assetDatatable = createNewAssetDatatable(dataJSONEquities);

When I click a row, I get undefined for rowData[0].
Objective: I need to retrieve the row I clicked ( S&P500, Hang Seng, Shanghai or China A50 )

I read about 10 similar post. I tried rowData, rowData[0] and rowData.Asset. All didn't work. Most of those posts were on Ajax data. I'm using Json.

Also, I'm using Bootstrap Metronic Keen Themes. I don't know whether KTDatatable, what I consider a "subclass" of DataTable, makes the implementation different.

Regards,
Donny

colin

Hi @quantdonny ,

Could you try changing this:

    $('.mytable').on('click', 'tr', function(){
        var rowData = datatable.rows( this ).data();
        console.log( 'You clicked this' );
        console.log(rowData[0]);   
    });  

to this, please. as in this example here:

    $('.mytable').on('click', 'tr', function(){
        var rowData = datatable.row( this ).data();
        console.log( 'You clicked this' );
        console.log(rowData);   
    });  

If that doesn't work, could you link to your page, please, and we can take a look.

Cheers,

Colin

quantdonny

Hi Colin,

Thanks for the prompt reply.

I've made the changes but I still can't get which row was clicked ( S&P500, Hang Seng, Shanghai Comp, China A50 ) from the rowData object. Do I need to access a field?

colin

Hi, did you notice I changed rows() to row() - it would be worth looking at the example I posted too.

quantdonny

I changed rows() to row(). Still no effect.

I saw your example and yes it works. I tried to edit it so that datatable takes in JSON, but didn't get it to work. Do you recommend:

1. I try out loading the data from text file via ajax ( as in your example )
2. Try to debug further with the JSON example?

For production, I intend to update the Datatable 6 times a day. And each update has about 300 data points.

colin

The best bet would be to modify my test case to demonstrate the problem. It helps to see the problem first hand.