Cannot display overall column sums of the datatable

srisivanicharan

I tried same approach in the following link to show the column sums in each page followed by overall columnsums in braces.

https://datatables.net/examples/advanced_init/footer_callback.html

But i could only show the columnsums of each page in my datatable and unable to show the overall columnsums of the data table.
total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );

both total and pageTotal gives me the same result. Can someone help me?

kthorngren

Do you have serverSide enabled?

Kevin

srisivanicharan

Thank you for your reply. I am using this approach in Shiny and it was mentioned that in Shiny serverSide is enabled by default.
https://rstudio.github.io/DT/server.html

Regards,
Sri Sivani Charan Yalamanchi

kthorngren

The above code sums the data available in the client web page. With server side processing the only data in the client is the data being displayed. To get totals of all pages you will need to get that from the server, likely form an ajax request. Or, if the amount of data you have allows for this, disable server side processing to retrieve all of the data.

Kevin

srisivanicharan

It' not working even though i disabled serverSide. Attached herewith is the screenshot.

kthorngren

The code snippet you provided works - I copied it into a test case to make sure. Probably will need to see your page are a test case showing the issue.

Kevin

srisivanicharan

Hey kevin,

It worked for me here http://live.datatables.net/jaseyuze/15/ . But it still doesn't work for me while using it with R. Please take a look at the following code i used in R.

sketch <- htmltools::withTags(table(tableHeader(names(table1)),tableFooter(FooterNames)))
opts <- list(pageLength = 10,columnDefs = list(list(className = 'dt-center', targets = "_all")),

           footerCallback = JS(
             "function( tfoot, data, start, end, display ) {",
             "var api = this.api()",

             #Total overall pages
             "var total1 = api.column(1).data().reduce(function(a,b){return a+b;});",
             "var total2 = api.column(2).data().reduce(function(a,b){return a+b;});",

            #Total over this page
             "var pageTotal1 = api.column(1,{page:'current'}).data().reduce(function(a,b){return a+b;});",
             "var pageTotal2 = api.column(2,{page:'current'}).data().reduce(function(a,b){return a+b;});",

             #update footer
             "$(api.column(1).footer()).html(''+pageTotal1+'( '+ total1 +'total)');",
             "$(api.column(2).footer()).html(''+pageTotal2+'( '+ total2 +'total)');",
             "}")

)

output$table <- DT::renderDataTable({
req(input$selected_var)
DT::datatable(data = selected_cols(),container=sketch,
options = opts,
rownames = FALSE)

})

Regards,
Sri

kthorngren

I suspect then that you have serverside processing enabled. You can look at the server response using the info in this tech note:
https://datatables.net/manual/tech-notes/1

If you see only 10 records and sent/received parameters as shown in the server side proc doc then you have server side processing enabled.

Kevin

srisivanicharan

Kevin,

I don't think that the server side processing is enabled.Please take a look at the following screenshot.

Regards,
Sri

kthorngren

How many records are contained in the data object?

Kevin

srisivanicharan

There are 21 records in total and 10 records in each page.

Regards,
Sri

kthorngren

There are 21 records in total and 10 records in each page.

Sorry, let me clarify my question. In your screenshot you have an array called data. How many elements are in that array? If 10 then you have server side processing enabled. The fact that draw, recordsTotal, and recordsFiltered is in your JSON response is further evidence of server side processing being enabled.

If 21 elements then you don't have server side enabled. Please provide a test case:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Instead of using ajax you can take your data array and copy it into the test case to use for your data. For example:

var data = [ [1,2,...5], [6,7,...9],.... ]  //json data array - 21 elements

var table = $('#myTable').DataTable( {
    data: data,
    ......    //any remaining config needed - no ajax option
    });

Kevin

srisivanicharan

Finally, its working. Thanks a lot Kevin.

Regards,
Sri