Question

我正在使用支持DataTable的表构建一个简单的页面。

来自我的服务器的数据如下：

[{"name": "John","salary": 2000,"bonus1": 100,"bonus2": 100},
 {"name": "Jack","salary": 2500,"bonus1":   0,"bonus2": 200},
 {"name": "Bill","salary": 2000,"bonus1": 300,"bonus2": 300}
]

我需要添加和计算第五列，它代表员工工资的百分比值（工资/所有工资的总和）

在fnPreDrawCallback我可以修改oSettings.aoData，所以当我console.log(oSettings.aoData)时，我得到了正确的值，但是表格的列是空的。

我的fnPreDrawCallback函数如下所示：

"fnPreDrawCallback": function (oSettings) {
          iTotal = [0, 0, 0]; //declared in $(document).ready
          var dataLength=oSettings.aoData.length;
            for (var i = 0; i < dataLength; i++) {
                iTotal[0] += oSettings.aoData[i]._aData.salary;
                iTotal[1] += oSettings.aoData[i]._aData.bonus1;
                iTotal[2] += oSettings.aoData[i]._aData.bonus2;
            }

          for (i = 0; i < dataLength; i++) {
                oSettings.aoData[i]._aData.percent=(oSettings.aoData[i]._aData.salary / iTotal[0] * 100).toFixed(2)+'%';

            }
          console.log(oSettings.aoData);
        },

这是我的代码：http://live.datatables.net/umezez/13/edit

我的问题：我应该在哪里更新数据，以便在表格中显示更新？

我想避免使用选择器和更新DOM的内容，因为我希望能够使用TableTools或服务器端处理导出我的表。

Answer 1

我不明白为什么你不做这两件事，更新aoData（以便你可以导出）并自己更新html（以便正确显示）

我知道这是一个黑客，但它应该工作：）

http://live.datatables.net/umezez/16/edit

使用fnUpdate（）

进行编辑

http://live.datatables.net/umezez/23/edit

Answer 2

您可以使用DataTables页脚回调检查下面的链接 http://www.datatables.net/examples/advanced_init/footer_callback.html

也请查看此讨论 http://www.datatables.net/forums/discussion/3605/addition-or-sum-of-column-values/p1

Answer 3

以下是答案

http://live.datatables.net/umezez/19

基本上你需要先计算工资总额（我把你的数据移动到一个变量并在表格渲染之前计算总数）之后你需要在％列上使用fnRender函数来计算并显示这样的百分比（下面是％的列定义）

 {
            "sTitle": "%",
            "bVisible": true,
            "sType": "string",
            "sWidth": "50px",
            "sClass": "center percent",
            "mData": "percent",
          "fnRender": function(o) {return o.aData.salary/totalSalaries}
        }

更新一列中的数据后更新表（重新计算）

3 个答案: