Datatable with JSON data, undefined rowData onClick

Datatable with JSON data, undefined rowData onClick

quantdonnyquantdonny Posts: 3Questions: 1Answers: 0

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

Answers

  • colincolin Posts: 8,013Questions: 0Answers: 1,348

    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

  • quantdonnyquantdonny Posts: 3Questions: 1Answers: 0

    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?

  • colincolin Posts: 8,013Questions: 0Answers: 1,348

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

  • quantdonnyquantdonny Posts: 3Questions: 1Answers: 0

    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.

  • colincolin Posts: 8,013Questions: 0Answers: 1,348

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

Sign In or Register to comment.