Question

我正在使用数据表。我想总结一些列，我想在报告的底部显示。我搜索很多东西。然后我在数据表中找到了新的页脚回调函数。我用过它。但我的输出还没有准备好......

我的代码如下，

function Databind(Pdestroy) {debugger;
    var destroy = false;
    if (Pdestroy == "1")
        destroy = true;

    var oTable = $('.datatable').dataTable({
        "bJQueryUI": true,
        'bServerSide': true,
        "bDestroy": destroy,
        "iDisplayLength": 10,
        "sPaginationType": "full_numbers",
        'sAjaxSource': '<%= Url.Action("listcount", "Home") %>',
        "bFilter": true,
        "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0, 1, 2, 7, 8, 9, 10, 11]}],

        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            var oSettings = oTable.fnSettings();
            $("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
            return nRow;
        },
        "footerCallback": function (row, aData, start, end, iDisplayIndex) {
         var api = this.api(),
         data;

            // Remove the formatting to get integer data for summation
            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };

            // Total over all pages
            total = api.column(4)
            .data()
            .reduce(function (a, b) {
                return intVal(a) + intVal(b);
            });

            // Total over this page
            pageTotal = api.column(4, {
                page: 'current'
            })
            .data()
            .reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);

            // Update footer
            $(api.column(5).footer()).html(
            '$' + pageTotal + ' ( $' + total + ' total)');
        }
});
}

此处Row显示未定义。并且也没有显示错误。但输出没有显示。我附上了输出的截图..

为了获得价值我应该做什么进一步的过程？

Answer 1

使用sum plugin而不是重新发明轮子：）

jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
    return this.flatten().reduce( function ( a, b ) {
        if ( typeof a === 'string' ) {
            a = a.replace(/[^\d.-]/g, '') * 1;
        }
        if ( typeof b === 'string' ) {
            b = b.replace(/[^\d.-]/g, '') * 1;
        }
        return a + b;
    }, 0 );
} );

因为您只想在每次重绘表时更新某个页脚列，所以只需要一个简单的drawCallback：

drawCallback: function() {
   var api = this.api();

   // Total over all pages
   var total = api.column(4).data().sum();

   // Total over this page
   var pageTotal = api.column(4, {page:'current'}).data().sum();

   $(api.column(5).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');
}

Answer 2

@davidkonrad的回答比我好。我建议使用他的答案而不是我的答案。

此代码可用于自定义操作，例如添加css等。

您的桌子上必须有tfoot。
您可以在版本1.10中使用页脚回调函数fnFooterCallback。

如何使用

＆＃13;

"fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
  //when working with pagination if you want to sum all records present in the current visible page only then use below  if block
  var iDisplayLength = parseInt(iEnd) - parseInt(iStart);
  if (iStart != 0) {
    iStart = iStart - iDisplayLength;
    iEnd = aaData.length;
  }
  //columns start from 0, i took 1st column so the line --> aaData[aiDisplay[i]][1]
  var iTarget = 0;
  for (var i = iStart; i < iEnd; i++) {
    iTarget += aaData[aiDisplay[i]][1] * 1; // because you get string in aaData[aiDisplay[i]][1] so multiplying with 1 gives number 
  }
  // Modifying the footer row
  var nCells = nRow.getElementsByTagName('th');
  nCells[1].innerHTML = parseInt(iTarget);
}

＆＃13;

如何使用footercallback对dataTable中的某些行求和

2 个答案: