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

发布时间:2019-06-12 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jquery – 如何使用footercallback对dataTable中的某些行求和脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用数据表.我想总结一些列,我想在报告的底部显示.我搜索很多东西.然后我在数据表中找到了新的页脚回调函数.我用过它.但我的输出还没有准备好..

我的代码如下,

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,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显示undefined.And也没有显示错误.但输出没有显示出来.我附上了输出截图..

要获得价值我应该做什么进一步的过程?

解决方法

使用 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)');
}

总结

以上是脚本之家为你收集整理的jquery – 如何使用footercallback对dataTable中的某些行求和全部内容,希望文章能够帮你解决jquery – 如何使用footercallback对dataTable中的某些行求和所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: