Unable to calculate the sum of the columns in each page

rakesh2020

Link to test case: https://github.com/Rakesh-Srinivasa/leadlogistics_latest.git --->check the user_list.html
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

rakesh2020

This is the code i have tried to calculate sum on a particular column and so far unable to achieve it.The tables are populated dynamically,please check the "user_list.html" in the git repository shared.

Any help will be truely appreciated

$(document).ready(function() {
$('#datatable_id1').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
        total = api
            .column( 6 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 6, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 6 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
} );

} );

colin

That's a lot of code in your git repo. We're happy to take a look, but as per the forum rules, please link to a simple test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

rakesh2020

Hi Colin.

you can login to this url "http://rakesh1986.pythonanywhere.com/leadlogisticsApp/search/"

There are 2 issues here.

1.Unable to calculate the sum of individual columns,here the issue is,if the pagination is set to 10, then only for the 1st page it works,but if we increase the pagination to 25 or go to the next page the "Total "still displays the sum of 1st 10 entries only.

2.when tried to add buttons for csv,pdf etc,the buttons didn't show up.

code snippet:

$(document).ready(function() { $('#datatable_id').DataTable( { // dom: 'Bfrtip', // buttons: [ // 'copyHtml5', 'csvHtml5', 'excelHtml5', 'pdfHtml5' // ] } ); } );

colin

1. It looks like you're calculating your totals with $('.form-group').ready(function(){ - so these will have no idea when the table is redrawn, either by sorting, searching, or paging. You would want to do that in one of DataTables' callbacks, such as footerCallback - see example here - that way it'll be called when the table data is changed.

2. The buttons have been disabled, so they won't appear:

  $('#datatable_id').DataTable( {
    // dom: 'Bfrtip',
    // buttons: [
    //     'copyHtml5', 'csvHtml5', 'excelHtml5', 'pdfHtml5'
    //     ]
} );

rakesh2020

Thanks a lot Colin.

1st issue got resolved.
2nd issue is still present,the problem is if they are not disabled i am getting the error.
"Uncaught SyntaxError: Unexpected string"

Also is there a way where i can calculate sum of column elements in individual rows and display them in a particular column in a row?

tangerine

   $('#datatable_id').DataTable( {
      // dom: 'Bfrtip',
      //     buttons: [
      //         'copyHtml5', 'csvHtml5', 'excelHtml5', 'pdfHtml5'
      //         ]




        "footerCallback": function ( row, data, start, end, display ) {

Enabling the commented section will require a comma after the closing square bracket.

rakesh2020

Thank you "tangerine",the error got resolved but still the buttons do not appear.

colin

Using the debugger, it looks like Buttons isn't installed. The ordering of the source files are important - put the DataTables source first before the other components. It's worth using the download builder, as it will ensure all dependencies are in the correct order.

Colin

rakesh2020

Thanks a lot Colin,yes after trying other combinations the the order had got changed.it is working now.

Last Query:
PDF button O/P only displays only half of the page vertically,not the entire tables,working fine with other formats,can you please help in rectifying the issue?

colin

Glad heading in the right direction! I'm not sure what you mean about your last query - can you update your webpage so that it shows that issue, please.

Colin