$('#example').DataTable().column(4).data().sum(); returning 0

$('#example').DataTable().column(4).data().sum(); returning 0

chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
edited January 2019 in Free community support

Sample case: https://datatables-ecommerence.000webhostapp.com/
I have no errors on the console or w3validator.

` <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>`
    $(document).ready(function() {
      var sum = $('#example2').DataTable().column(4).data().sum();
      $('#total').html(sum);
    });

I tried other columns too and they all return 0.

=====

Since I have two tables, I may have to make my own personal script because https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js uses example (not example2). That is the only thing I can think of that could be wrong.

I will post any other updates as I will be working on this for a while.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    My guess is var sum = $('#example2').DataTable().column(4).data().sum(); is running before the ajax response. Try placing it in either initComplete or drawCallback so it runs after the ajax resposne and the table is loaded.

    Kevin

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Exactly what Kevin says (as usual :)). You are running the function before the data has been loaded, so it is correct in reporting 0 as the sum.

    Allan

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited February 2019

    This still returns 0 (the only way I got it to return no errors). I am assuming this code is the closest as its the only one I had with no errors or the table disappearing (I tried many ways).

    Is it best to put the drawback within the main header? or separate.

        $(document).ready(function() {
       var table=  $('#example2').DataTable( {
           responsive: true,
            "processing": true,
            "serverSide": true,
            ajax: {
            url: 'server2.php',
            type: 'POST',
            },
         columnDefs: [ 
             {  targets: -1,
             render: function (data, type, row, meta) {
                return '<button type="button" class="btn btn-danger btn-md active delete_btn" data-id="' + meta.row + '"  id=" ' + meta.row + ' " value="delete">  <span class="glyphicon glyphicon-trash"></span> </button>';
             }
             }
            ],
              drawCallback: function () {
          var api = this.api();
          $( api.table().footer() ).html(
            api.column( 4, {page:'current'} ).data().sum()
          );
        }
        })
    } ); // end ready
    
    $(document).ready(function() {
       var sum = $('#example2').DataTable().column(4).data().sum();
      $('#total').html(sum);
    });
    </script>
    
  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    Answer ✓

    Here is an example:
    http://live.datatables.net/segeriwe/1/edit

    I took your code in lines 27 and 28 and placed them in drawCallback. I changed the column to 5 which has numeric values. The example is using SSP.

    Kevin

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited February 2019

    Ok here is full code solution that answered my question...

    Interestingly enough, (I just noticed today) this produces the sum of the current page only (I will try to find a work around). Or I might just take off pages for the second table entirely anyway.

    <script> 
    $(document).ready(function() {
       var table=  $('#example2').DataTable( {
           responsive: true,
            "processing": true,
            "serverSide": true,
            ajax: {
            url: 'server2.php',
            type: 'POST',
            },
            drawCallback: function () {
            var sum = $('#example2').DataTable().column(4).data().sum();
            $('#total').html(sum);
          },    
         columnDefs: [ 
             {  targets: -1,
             render: function (data, type, row, meta) {
                return '<button type="button" class="btn btn-danger btn-md active delete_btn" data-id="' + meta.row + '"  id=" ' + meta.row + ' " value="delete">  <span class="glyphicon glyphicon-trash"></span> </button>';
             }
             }
            ],
       })
    } ); // end ready
    </script>
    
  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    this produces the sum of the current page only

    That is because you are using server side processing. The sum() method can only sum the data in the client which is the current page.

    One option would be to have your server code run a query to sum that column then return that in the JSON response. You can then use the xhr event to get the sum out of the json object passed into the event and use $('#total').html(sum); in the event to display it.

    Something like this assuming the sever script appends the sum object to the returned json:

    $('#example')
        .on('xhr.dt', function ( e, settings, json, xhr ) {
          $('#total').html(json.sum) ;
        } )
    

    Kevin

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited February 2019

    Ok. Maybe getting the sum using SQL would be easier.

    But with your method I will give it some research and post back any end results.

This discussion has been closed.