How to display computed column dynamically using Jquery Datatables

krn1231

I am newbie to Jquery Datatables so please excuse if this is a dumb question .

I was able to form Table using Jquery Datatables based on existing javascript resource .

Right now i have got two columns in the table Name and Price .

I need to display a Third column by name SubPrice which is calculated dynamically based on Total - Price

http://jsfiddle.net/cv04pp37/4/

I was trying it this way , but no luck

var table =   $('#kiran').dataTable(
    {
      "order": [
        [1, "desc"]
      ],
      "paging": false,
     "aaData": json,
      "aoColumns": [
        { "mDataProp": "Name" },
        { "mDataProp": "Price" },
          { 
     mRender: function(data, type, row){
        return row[2] - row[1]; 
     }
    ]

    });

Could anybody please help me how to do this

allan

Your data is object based so the fact you are accessing it as an array in mRender isn't going to work. Use row.Total - row.Price.

Allan

krn1231

I am very much new to the Jquery Datatables , if mRender doesn't work could you please let me know how to do this

ignignokt

I believe he means to do this:

var table =   $('#kiran').dataTable({
    "order": [[1, "desc"]],
    "paging": false,
    "aaData": json,
    "aoColumns": [
        { "mDataProp": "Name" },
        { "mDataProp": "Price" },
        { mRender: function(data, type, row){
            return row.Total - row.Price;
            }
        }
    ]
});

krn1231

I need to display a Third column by name SubPrice which is calculated dynamically based on Total - Price

tangerine

        { "mDataProp": "Name" },
        { "mDataProp": "Price" },
        { 
           "mDataProp": "My_New_Column_Name" ,
            mRender: function(data, type, row){
            return row.Total - row.Price;
            }
        }

krn1231

I used the code you mentioned http://jsfiddle.net/cv04pp37/7/ , but still no luck.

krn1231

I am getting Uncaught TypeError: Cannot read property 'style' of undefined in browser console .

tangerine

First, your html thead only defines two columns.

Second, where I put "My_New_Column_Name" you should put your own name for the column!

krn1231

Yes thank you got it .