Сумма столбцов не отображается в нижнем колонтитуле в jQuery datatable после ответа на вызов AJAX? - PullRequest
0 голосов
/ 17 мая 2019

У меня есть таблица данных, в которой при нажатии кнопки будет вызываться вызов 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, что я использую, но все еще не работает. Мне нужна сумма столбцов в нижнем колонтитуле, что мне не хватает, пожалуйста, помогите?

...