Question

I’m building a simple page with DataTable enabled table.

Data that comes from my server looks like so:

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

I need to add and calculate a fifth column that will represent percentage value of salaries for employees (salary/sum of all salaries)

In fnPreDrawCallback I am able to modify oSettings.aoData so when I do console.log(oSettings.aoData) I get correct values, but table has that column empty.

My fnPreDrawCallback function looks like this:

"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);
        },

Here is my code: http://live.datatables.net/umezez/13/edit

My question: Where I should update my data so that updates will be visible in table?

I would like to avoid using selectors and updating content of DOM, because I would like to be able to export my table using TableTools or server-side processing.

Answer 1

I don’t understand why don’t you simply do both things, update aoData ( so that you can export ) and update the html by yourself ( so that it displays correctly )

I know it’s a hack, but it should work 🙂

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

Edit using fnUpdate()

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