我无法使用datatable jquery显示aaData的值

时间:2014-02-21 12:16:06

标签: javascript jquery ajax datatables

在“fnFooterCallback”中访问aaData的值时出现问题。

这是log:

的输出
  

aaData:[object Object],[object Object],[object Object],[object Object]

真的,我在数据表中显示了4行,但是我无法访问这些值来显示数据集中的总数。

我尝试使用它:

"fnDrawCallback": function(oSettings) {
     console.log("aaData: "+oSettings.aoData ); 
     iTotal = [0, 0];
     for (var i = 0; i < oSettings.aoData.length; i++) {
         iTotal[0] += oSettings.aoData[i]._aData.quantity;
     }

    //Totales
     $("#Totales").empty();
     $("#Totales").append('<th>sum</th><th>'+iTotal[0]+'</th>');
}

我也尝试过这个:

"fnFooterCallback" : function(nRow, aaData, iStart, iEnd, aiDisplay) {
    console.log("aaData: " + aaData);
    var totalCantidad = 0;
    for ( var i = 0; i < aaData.length; i++) {
        totalCantidad = totalCantidad+ parseInt(aaData[i].Cantidad) * 1;
    }
    var nCells = nRow.getElementsByTagName('th');
    nCells[1].innerHTML = totalCantidad;
}

这是我对数据表的定义:

$("#lineOutletTable").dataTable({
    "bInfo" : false,
    "bPaginate" : false,
    "bLengthChange" : true,
    "iDisplayLength" : -1,
    "bFilter" : false,
    "bSort" : true,
    "aaSorting" : [ [ 0, "asc" ] ],
    "bAutoWidth" : false,
    "oLanguage" : spanishInfo,
    "aoColumns" : columnsTableLine,
    "sPaginationType" : "bootstrap",
    "iDisplayStart" : 20,
    "sScrollY" : "60px",
    "sDom" : "<row-fluid'<'span6 wrapMedidasReales'><'span6 wrapPrecios'>>t<row-fluid'<'span6 'l><'span6'p>>",
    "fnDrawCallback" : function(oSettings) {
        console.log("aaData: " + oSettings.aoData);
        iTotal = [ 0, 0 ];
        for ( var i = 0; i < oSettings.aoData.length; i++) {
            iTotal[0] += oSettings.aoData[i]._aData.quantity;
        }
        // Totales
        $("#Totales").empty();
        $("#Totales").append('<th>sum</th><th>' + iTotal[0] + '</th>');
    },
    "fnFooterCallback" : function(nRow, aaData, iStart, iEnd, aiDisplay) {
        console.log("aaData: " + aaData);
        var totalCantidad = 0;
        for ( var i = 0; i < aaData.length; i++) {
            totalCantidad = totalCantidad + parseInt(aaData[i].Cantidad) * 1;
        }
        var nCells = nRow.getElementsByTagName('th');
        nCells[1].innerHTML = totalCantidad;
    }
});

我从Ajax读取值,数据集正常工作,除了总数。

如何访问aaData中的值?

3 个答案:

答案 0 :(得分:0)

有点难以理解你想要做什么,因为你没有包含你的表的html部分和ajax调用的结果。所以我不知道你想在哪里显示你的总数。

看一下这段代码:

$(function() {
  totals = 0;
  var otable = $("#datatable").dataTable({
    "fnFooterCallback": function(nRow, aaData, iStart,
      iEnd, aiDisplay) {
      x = aaData;
      $.each(x, function(key, value) {
        totals = totals + parseInt(value[1]);
      })
      $("#Totales").empty();
      $("#Totales").append('Totals: ' + totals);

    }
  });
});

Plunker

这至少应该给你一个如何访问aaData的提示。也许使用plunker作为基础并填写您已完成的定义。然后我们有一个更好的起点。

答案 1 :(得分:0)

Html的代码是:

<div class="row finder-line-outlet-container table-wrapper">
                <table cellpadding="0" cellspacing="0" border="0"
                    class="table table-striped table-bordered table-condensed dataTable customTable"
                    id="lineOutletTable" aria-describedby="example_info">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>

                    <tfoot>
                        <tr>
                            <th>Totales</th>
                            <th id="totalCantidad"></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th id="totalMetros"></th>
                            <th></th>   
                            <th></th>                           
                        </tr>
                </table>
            </div>

我使用你的功能,但是错误是一样的,当我在控制台中打印时,总计的值是NaN。

我使用ajax访问数据。

我解决了问题,在函数Ajax中,带来数据,我求值,并在fnFooterCallback中打印值,但是,为什么不工作,当fnFooterCallback中的值加起来时?

答案 2 :(得分:0)

也许这就是:

console.log("aaData: "+oSettings.aoData.length);

如果我的问题正确的话,应该可以正常工作..