1

我有最终版本的数据将来自服务器，但现在它是静态的，看起来像这样：

[
 {"name": "John","c1": 12,"c2": 10,"c3": 5},
 {"name": "Jack","c1": 10,"c2": 20,"c3": 15},
 {"name": "Bill","c1": 8,"c2": 30,"c3": 15}
]

我正在初始化 DataTable，如下所示：

var iTotal = [0, 0, 0];

var oTable1 = $('#example1').dataTable({
    "table-layout": "fixed",
    "oLanguage": {
        "sZeroRecords": "No data"
    },
    "fnPreDrawCallback": function(oSettings) {
        iTotal = [0, 0, 0];
        for (var i = 0; i < oSettings.aoData.length; i++) {
            iTotal[0] += oSettings.aoData[i]._aData.c1;
            iTotal[1] += oSettings.aoData[i]._aData.c2;
            iTotal[2] += oSettings.aoData[i]._aData.c3;
        }
        //set percentage value
        for (i = 0; i < oSettings.aoData.length; i++) {
            oSettings.aoData[i]._aData.perc = (oSettings.aoData[i]._aData.c1 / iTotal[0] * 100).toFixed(2) + '%';
        }
        console.log(oSettings.aoData); //here data is set correct 
    },
    "fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
        var nCells = nRow.getElementsByTagName('th');
        nCells[1].innerHTML = iTotal[0];

        //check if column[2] is visible??!!how
        //nCells[2].innerHTML=iTotal[1];

        var secondRow = $(nRow).next()[0]; //see this
        var ndCells = secondRow.getElementsByTagName('th');
        ndCells[1].innerHTML = aaData.length > 0 ? (iTotal[0] / aaData.length).toFixed(2) : 0;
    },
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": false,
    "aaSorting": [[0, "asc"]],

    "aaData": [{"name": "John","c1": 12,"c2": 10,"c3": 5},
               {"name": "Jack","c1": 10,"c2": 20,"c3": 15},
               {"name": "Bill","c1": 8,"c2": 30,"c3": 15}
              ],
    "aoColumns": [{
        "mData": "name"},
    {
        "mData": "c1"},
    {
        "mData": "c2"},
    {
        "mData": "c3"},
    {
        "mData": null,
        "bVisible": false,
        "mRender": function(data, type, full) {
            return (full.c1 / iTotal[0]);
        }},
    {
        "mData": null,
        "sClass": "center",
        "mRender": function(data, type, full) {
            return '<img title="Remove"  class="deleteMe" src="http://openfire-websockets.googlecode.com/svn-history/r2/trunk/plugin/web/images/delete-16x16.gif" style="cursor: pointer">';
        }}]
});

在fnPreDrawCallback我试图计算 perc 字段的值并使用 console.log 我能够看到正确的数据，但是当我尝试在正确的列中显示 perc 时，我没有得到任何数据。

这是我的示例代码：http: //jsfiddle.net/Misiu/kS9bj/1/

我应该如何更新我的代码以“即时”计算我的百分比列

4

1 回答 1

0

请参阅此链接http://jsfiddle.net/kS9bj/6/

HTML 代码

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
    <thead>
      <tr>
      <th>Name</th>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>%</th>
      <th>Delete</th>
      </tr>
    </thead>
    <tbody id="prec">
        <tr >
        <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
          </tr>
      </tbody>            
    <tfoot>
      <tr id="sum">
        <th>Sum</th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr id="avg">
        <th>Avg</th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </tfoot>
  </table>

数据表代码

$(document).ready(function() {

var iTotal = [0, 0, 0];

var oTable1 = $('#example1').dataTable({
    "table-layout": "fixed",
    "oLanguage": {
        "sZeroRecords": "No data"
    },
    "fnDrawCallback": function(oSettings) {
        iTotal = [0, 0, 0];
        for (var i = 0; i < oSettings.aoData.length; i++) {
            iTotal[0] += oSettings.aoData[i]._aData.c1;
            iTotal[1] += oSettings.aoData[i]._aData.c2;
            iTotal[2] += oSettings.aoData[i]._aData.c3;
        }
        //Sum
        $("#sum").empty();
        $("#sum").append('<th>sum</th><th>'+iTotal[0]+'</th><th>'+iTotal[1]+'</th><th>'+iTotal[2]+'</th>')
        //AVG    
        $("#avg").empty();
        $("#avg").append('<th>avg</th><th>'+iTotal[0]/3+'</th><th>'+iTotal[1]/3+'</th><th>'+iTotal[2]/3+'</th>')    

        for (i = 0; i < oSettings.aoData.length; i++) {
            oSettings.aoData[i]._aData.perc = (oSettings.aoData[i]._aData.c1 / iTotal[0] * 100).toFixed(2) + '%';
       // $("#prec").empty();  
        $("#prec").append('<tr><td></td><td></td><td></td><td></td><td>'+oSettings.aoData[i]._aData.perc+'</td><td></td></tr>');
              }  

    },   

    "fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
    var nCells = nRow.getElementsByTagName('th');
    nCells[1].innerHTML = iTotal[0];

    //check if column[2] is visible??!!how
    //nCells[2].innerHTML=iTotal[1];

    var secondRow = $(nRow).next()[0]; //see this
    var ndCells = secondRow.getElementsByTagName('th');
    ndCells[1].innerHTML = aaData.length > 0 ? (iTotal[0] / aaData.length).toFixed(2) : 0;
     },

    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": false,
    "aaSorting": [[0, "asc"]],

    "aaData": [{"name": "John","c1": 12,"c2": 10,"c3": 5},
               {"name": "Jack","c1": 10,"c2": 20,"c3": 15},
               {"name": "Bill","c1": 8,"c2": 30,"c3": 15}
              ],
    "aoColumns": [{
        "mData": "name"},
    {
        "mData": "c1"},
    {
        "mData": "c2"},
    {
        "mData": "c3"},
    {  },                        
    {
        "mData": null,
        "sClass": "center",
        "mRender": function(data, type, full) {
            return '<img title="Remove"  class="deleteMe" src="http://openfire-websockets.googlecode.com/svn-history/r2/trunk/plugin/web/images/delete-16x16.gif" style="cursor: pointer">';
        }}]

});

});

于 2012-09-24T11:12:55.393 回答