数据表不会在页脚上过滤总和金额

Question

我正在使用数据表在我的管理面板上显示一些数据.

但是,当我使用搜索选项过滤结果时,它不会影响页脚总和金额,金额保持不变？任何想法如何解决？

<?php if(isset($data_tables)) { ?>

    jQuery('#<?php echo $data_tables_name ?>').DataTable({
        "filter": "applied",     
        "footerCallback": function ( row, data, start, end, display ) {

        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

        if (api.column(2).data().length) {
            total_revenue = api
                .column( 2 )
                .data()
                .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        } );
        } else {
            total_revenue = '';
        }

        $( api.column( 2 ).footer() ).html(
            total_revenue.toFixed(2)
        );

    },
    "lengthMenu": [ [12, 50, 100, -1], [12, 50, 100, "All"] ],
    responsive: true,

    "order": [[ 0, "desc" ]],
    "dom": 'T<"clear">lfrtip',
     "tableTools": {
        "sSwfPath": "<?php echo site_url(); ?>public/admin/swf/copy_csv_xls_pdf.swf"
     }
});

Answer 1

您需要使用column()函数的选择器修饰符选项来仅使用 来请求过滤列。默认情况下，按当前顺序返回所有页面的所有数据，而不应用过滤。使用，您可以修改该行为。{ search:'applied' }column()selector-modifier

与应用于所有页面上的表的当前搜索相匹配的行的总数：

if (api.column(2, { search:'applied' }).data().length) {
   total_revenue = api
      .column( 2, { search:'applied' } )
      .data()
      .reduce( function (a, b) {
         return intVal(a) + intVal(b);
      });
} else {
   total_revenue = 0;
}

更新：total_revenue必须分配给，0以便在表中没有数据时代码能够工作。

请参阅下面的示例进行演示。

if (api.column(2, { search:'applied' }).data().length) {
   total_revenue = api
      .column( 2, { search:'applied' } )
      .data()
      .reduce( function (a, b) {
         return intVal(a) + intVal(b);
      });
} else {
   total_revenue = 0;
}

$(document).ready(function() {
  $('#example').dataTable({
    "footerCallback": function ( row, data, start, end, display ) {

        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

        if (api.column(3, { search:'applied' }).data().length) {
            total_revenue = api
                .column( 3, { search:'applied' } )
                .data()
                .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        } );
        } else {
            total_revenue = 0;
        }

        $( api.column( 3 ).footer() ).html(
            total_revenue.toFixed(2)
        );

    }
  });
});