如何使用Jquery Datatables动态计算和显示列

时间:2015-01-26 17:47:26

标签: jquery

我正在使用Jquery Datatables以表格的形式显示我的数据。

我能够使用基于现有javascript资源的Jquery Datatables来构建Table。

现在我在名称和价格表中有两列。

我需要按名称SubPrice显示第三列,它是根据总价格

动态计算的

http://jsfiddle.net/cv04pp37/5/

我是这样尝试的,但没有运气

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;
     }
    ]

    });

有人可以帮我解决这个问题吗

我将代码修改为

 var json = [
  {
    "Name": "ONE",
    "Price": "12" ,
    "Total" : "120"
  },
  {
    "Name": "TWO",
    "Price": "100",
     "Total" : "500"
  },
  {
    "Name": "THREE",
    "Price": "42" ,
     "Total" : "300"
  }]




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

http://jsfiddle.net/cv04pp37/7/

我将此作为浏览器控制台的一部分

Uncaught TypeError: Cannot read property 'style' of undefined

1 个答案:

答案 0 :(得分:0)

问题发布在Datatables论坛上,并在那里得到答案:https://datatables.net/forums/discussion/25675/how-to-display-computed-column-dynamically-using-jquery-datatables#Comment_70573
这是答案的副本:
    我相信他的意思是这样做:

Javascript

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;
        }
    }
  ]
});