Question

我有一个数据表，在该表中单击按钮将触发AJAX调用，并且响应将显示在数据表中。我想要页脚中的列数据总和，但页脚未显示出什么问题？

HTML

<table id="viewDetailsDatatable" align="center" class="display" cellspacing="0" width="100%">
    <thead>
    <tr class="boxheadingsmall" style="font-size: 11px;">
    <th style="text-align:center;" data-orderable="false">Date</th>
    <th style="text-align:center;" data-orderable="false">S Count</th>
    <th style="text-align:center;" data-orderable="false">S Amount</th>
    <th style="text-align:center;" data-orderable="false">R Count</th>
    <th style="text-align:center;" data-orderable="false">R Amount</th>
    <th style="text-align:center;" data-orderable="false">Net Amount</th>
    </tr>
    </thead>                    
    <tfoot>
        <tr class="boxheadingsmall">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        </tr>
    </tfoot>
</table>

数据表代码

$(function() {
    $('#viewAmountDetails').on('click', function() {
         var test1 = document.getElementById("input1").value;
         var test2 = document.getElementById("input2").value;
         var test3 = document.getElementById("input3").value; 
         var test4 =  document.getElementById("input4").value;
         var test5 = document.getElementById("input5").value;
         var test6 = document.getElementById("input6").value;

         table = $('#viewDetailsDatatable').DataTable({
             "columnDefs": [
                        {

                            "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 S Count
                                total = api.column(1).data().reduce(
                                        function(a, b) {
                                            return intVal(a) + intVal(b);
                                        }, 0);

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

                                // Total S Count Update footer
                                $(api.column(1).footer()).html(
                                        '' + pageTotal.toFixed(2) + ' ' + ' ');

                                // Total s amount
                                total = api.column(2).data().reduce(
                                        function(a, b) {
                                            return intVal(a) + intVal(b);
                                        }, 0);

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

                                // Total s amount Update footer
                                $(api.column(2).footer()).html(
                                        '' + pageTotal.toFixed(2) + ' ' + ' ');

                                // Total r count
                                total = api.column(3).data().reduce(
                                        function(a, b) {
                                            return intVal(a) + intVal(b);
                                        }, 0);

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

                                // Total r count Update footer
                                $(api.column(3).footer()).html(
                                        '' + pageTotal.toFixed(2) + ' ' + ' ');

                                // Total r amount
                                total = api.column(4).data().reduce(
                                        function(a, b) {
                                            return intVal(a) + intVal(b);
                                        }, 0);

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

                                // Total r amount Update footer
                                $(api.column(4).footer()).html(
                                        '' + pageTotal.toFixed(2) + ' ' + ' ');


                                // Total net amount
                                total = api.column(5).data().reduce(
                                        function(a, b) {
                                            return intVal(a) + intVal(b);
                                        }, 0);

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

                                // Total net amount Update footer
                                $(api.column(5).footer()).html(
                                        '' + pageTotal.toFixed(2) + ' ' + ' ');


                            },


                            "className": "dt-center", 
                        "targets": "_all"
                        }
                ],
            dom: 'BTrftlpi',
            "searching": false,
            "paging": false,            
            destroy: true,                                  
            ajax: function (data, callback, settings) {
                           $.ajax({
                                       "url": "abc.JSON",
                                       "type": "POST",
                                       "timeout" : 0,
                                       "data": {
                                           "test1": test1,
                                           "test2": test2,
                                           "test3": test3,
                                           "test4": test4,
                                           "test5":test5,
                                           "test6" : test6,

                                        },
                                        success:function(data){
                                             callback(data);

                                        },
                                            error:function(data) {
                                                  alert("Unable to fetch data");
                                        }
                                });
                    },
        "columns": [
                    { "data": "cDate" },
                    { "data": "sCount" },
                    { "data": "sAmount" },
                    { "data": "rCount" },
                    { "data": "rAmount" },
                    { "data": "netAmount" }
                ]
        });
    });
});

我的代码在HTML和ajax之上，我正在使用但仍无法正常工作。我想要页脚中的列总数，我所缺少的内容请帮忙？

Answer 1

做这个例子：

const Table = $('#foo').DataTable({
      . . . . . .,
      . . . . . .,
      drawCallback: function(){
         Table.columns(5, {
          page: 'current'
         }).every(function() {
           var sum = this
           .data()
           .reduce(function(a, b) {
              var x = parseFloat(a) || 0;
              var y = parseFloat(b) || 0;
              return x + y;
           }, 0);
         console.log(sum);
         $(this.footer()).html(sum);
         });
        }
      });

在这种情况下，列是第5列

AJAX调用响应后，列总和未显示在jQuery数据表的页脚中吗？

1 个答案: