"Total over all pages" for filtered results

thelibrariancat

I'm following the example at https://datatables.net/examples/advanced_init/footer_callback.html. If I use this example, the "total over all pages" shows the total of all "Attendance" in the table whether or not they show in the search results. That's cool, but not what I'm looking for.

What I would like is for the "total over all pages" to show the total for only the current search results, over all pages of those results. How would I do that?

var table = $('#data-table').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 *** This is where I'm having trouble ***
            total = api
                .column( 11 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 11, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 11 ).footer() ).html(
                "Attendance: " + pageTotal +' ( ' + total +' total)'
            );
        }
    } );

allan

Use the selector-modifier just like you are doing in line 23 of the above code:

total = api
                .column( 11, { search: 'applied' } )

Allan

thelibrariancat

Perfect, thank you! And so easy. I thought it might be something like that, but didn't know what to look for in the documentation.

mansourhussaini

Awesome and Thanks!!!, This saved my whole day!

akilivan

What happen when are numbers with decimal on colums? Then its not work fine. Can you share the codes if the numbers are float on columns? Many thanks...

kthorngren

The code in the example linked to above works with float numbers:
http://live.datatables.net/hutupasi/1/edit

We would need an example with your data to help troubleshoot.

Kevin

mp12345678

hi,

if there are more than one filters, then how it will work?

---

                  // Total DAYS over all pages

                  if (api.column(8).data().length){
                  var totalDays = api
                  .column( 8 )
                  .data()
                  .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
                  } ) }
                  else{ totalDAYS = 0};


              // Total DAYS over this page
              
                 

        if (api.column(8,{ search: 'applied',page:'current'}).data().length){
              var pageTotalDays = api
                  .column( 8,{ search: 'applied',page:'current'})
                  .data()
                  .reduce( function (a, b) {
                      return intVal(a) + intVal(b);
                  } ) }
                  else{ pageTotalDays = 0};

   if (pageTotalDays) {
                    $( api.column(8).footer() ).html(
                         pageTotalDays.toFixed(2) //+'<br />'+ pageTotalDays.toFixed(2)
                    );

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Not sure I understand the question but do you want both search applied and page current in this? .column( 8,{ search: 'applied',page:'current'})

If this doesn't help then please update my example to show the issue you are having.

Kevin