jquery datatable footercallback doesn't work after page post back

Question

Hello Everyone,

I am using jquery datatable in my web form to show the total on the footer of the table.
Below is my code.

 $(function () {
             $('[id$=GVQ]').DataTable({
                 "paging": false,
                 "bInfo": false,
                 "footerCallback": function (row, data, start, end, display) {
                     var api = this.api(), data;

                     // converting to interger to find total
                     var intVal = function (i) {
                         return typeof i === 'string' ?
                             i.replace(/[\$,]/g, '') * 1 :
                             typeof i === 'number' ?
                                 i : 0;
                     };

                     // computing column Total of the complete result 
                     var Req = api
                         .column(6)
                         .data()
                         .reduce(function (a, b) {
                             return intVal(a) + intVal(b);
                         }, 0);

                     var Reco = api
                         .column(7)
                         .data()
                         .reduce(function (a, b) {
                             return intVal(a) + intVal(b);
                         }, 0);

                     var App = api
                         .column(8)
                         .data()
                         .reduce(function (a, b) {
                             return intVal(a) + intVal(b);
                         }, 0);

                     $(api.column(5).footer()).html('Total');
                     $(api.column(6).footer()).html(Req);
                     $(api.column(7).footer()).html(Reco);
                     $(api.column(8).footer()).html(App);

                 },


             });
         });

This works fine on fist page load. But when I select a dropdown item from a dropdownlist on the same form the total is disappear after page gets postback.

Kindly suggest.

Answer 1

Hi @Gaurav Kumar ,
I tried your codes but I have errors. I think,you could refer these codes.Your problem is that you need to update the pagetotal method.
You could refer to below codes:

$(document).ready(function() {  
    $('#example').DataTable( {  
        colReorder: true,  
        "footerCallback": function ( row, data, start, end, display ) {  
            var api = this.api(), data;  
            var currentPosition = api.colReorder.transpose( 3 );  
   
            // 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( currentPosition )  
                .data()  
                .reduce( function (a, b) {  
                    return intVal(a) + intVal(b);  
                }, 0 );  
   
            // Total over this page  
            pageTotal = api  
                .column( currentPosition, { page: 'current'} )  
                .data()  
                .reduce( function (a, b) {  
                    return intVal(a) + intVal(b);  
                }, 0 );  
   
            // Update footer  
            $( api.column( currentPosition ).footer() ).html(  
                pageTotal +' ('+ total +' total)'  
            );  
        }  
    } );  
} );  

Best regards,
Yijing Sun

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.