Counting SUM in drawCallback

ChrisF

So I am trying to count the SUM of hours in column 16 when using serverside. The method I used before ( standard footerCallback with intval functions) always returned 0s. This one works but when I navigate to page 2 it will be the sum of page 1 and 2, but when I navigate to page 3 it will display correctly, even when I navigate back to page 2. Example: Page 1 => The sum of the rows is 12 hours. --> 12 should be displayed Page 2 = > The sum of the rows is 3 hours --> 3 should be displayed but instead 15 is displayed. (When navigating to page 3 and back to page 2 the correct 3 hours value is displayed). I think the question is where should I put the

 totalhour = 0;
 total = 0;
 totalsec = 0;

for the correct values.

My code ( parts that matter):

$(document).ready(function () {$('#usertable').DataTable({


    dom: 'Blfrtip',
    buttons: [
        { extend: 'excel', text: 'Export do excelu', className: 'excelbutton',
            exportOptions: {
                columns: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
            }
        },
        { extend: 'pdf', text: 'Export do PDF', className: 'excelbutton',
            exportOptions: {
                columns: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
            }
        }
    ],


    "ajax": "http://appnormit.visibly.sk/connecttozakazky.php",
    "fnDrawCallback": function() {
        var api = this.api();



        $( api.column( 16 ).footer() ).html(totalhour);
        $( api.column( 17 ).footer() ).html(total);
        $( api.column( 18 ).footer() ).html(totalsec);
        totalhour = 0;
        total = 0;
        totalsec = 0;

    },
 "serverSide": true,
    "order": [[ 0, "asc" ]],
    "columnDefs": [
        {
            "targets": 16,
            "data": null,
            "render": function (data, type, full, meta) {
                var mylord = parseInt(full[16]/60);
                totalhour = totalhour + mylord;
                return  parseInt(full[16]/60)

            }
        },
...

colin

Hi @ChrisF

You would be better off using the footerCallback, then you wouldn't have to keep running totals. If you look at this example here, it's showing two totals, one for all pages, and one for the current page (uses {page:current} for the selector-modifier),

Cheers,

Colin

ChrisF

Hello @colin ,

As I said in my post, I tried to use footerCallback but it didnt work. The data is from serverside and also modified in render.

colin

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

allan

Hi,

I'd agree with Colin that footerCallback would be the place to do this, but it shouldn't actually matter much between that and drawCallback.

What I would suggest you do is get the sum using cells().render() to get the data for the column in question and then use the sum plug-in to get the sum - e.g.:

api.cells( null, 16 ).render('display').sum();

That will get the sum of the calculated values from column 16. You could then write that into the footer.

Allan

ChrisF

Thank you very much allan, your answer worked.