datatables issues when the footercallback is called to do a sum for the columns

datatables issues when the footercallback is called to do a sum for the columns

maniyamaniya Posts: 78Questions: 13Answers: 0
edited February 2022 in DataTables 1.10

Problem with datatables Code:

        // SUM PLUGIN
        jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
            return this.flatten().reduce( function ( a, b ) {
                if ( typeof a === 'string' ) {
                    a = a.replace(/[^0-9]/g, '') * 1;
                }
                if ( typeof b === 'string' ) {
                    b = b.replace(/[^0-9]/g, '') * 1;
                }
                return a + b;
            }, 0 );
        });

Here is my Jquery Call to datatables:

    var oTable = $("#example").DataTable({
      "bFilter": true,
      "pagingType": "full_numbers",
      "serverSide": true,
      "deferRender":true,
      "processing": true,
      "ajax": {
        "url" : "submit.html",
        "type" : "POST"
      },
      "footerCallback": function () {
          var api = this.api(),
              columns = 1, 2, 3];
          for (var i = 0; i < columns.length; i++) {
              $('tfoot th').eq(columns[i]).html(api.column(columns[i], {page:'current'}).data().sum());
              $('tfoot th').eq(columns[i]).append(api.column(columns[i], {page:'current'}).data().sum());
          }
      }
      });

the footer pagination is calculating wrong, the data i am showing is 200 records at first instance and then when i change the select to show 10 or 25, the sum of the rows at the bottom is always wrong, even at the first instance or when the pagination is changed or moved.

it never calculates the right data

it looks like this

HTML Code

https://jsfiddle.net/ga8sqky5/1/

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

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    The test case doesn't run - please can you update it so that it demonstrates the problem you want support with,

    Colin

  • maniyamaniya Posts: 78Questions: 13Answers: 0

    here is the fiddle

    https://jsfiddle.net/42qxgeby/

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

    Your sum() plugin is using a.replace(/[^0-9]/g, '') to turn the data into a number. The problem is $75.00 ends up as 7000. Something like the intVal function from the FooterCallback example example will work better. However some changes will need to be made to keep the decimal portion. Give that a try and let us know.

    Kevin

  • maniyamaniya Posts: 78Questions: 13Answers: 0

    i tried the intVal but it still gets worse

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

    Since you have a mix of cell formats, some columns have html tags, etc, you will need something more comprehensive to parse the data to extract the number. See this example:
    https://jsfiddle.net/L0476bqd/

    Also note I commented out this statement as it is redundant:

    $('tfoot th').eq(columns[i]).append(api.column(columns[i], {page:'current'}).data().sum());
    

    Kevin

  • maniyamaniya Posts: 78Questions: 13Answers: 0

    Great, but it should consider negative as negative and do the calculation in right manner

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Sounds like you'll need to parse the data for those in brackets then, and subtract that from the total...

    Colin

  • maniyamaniya Posts: 78Questions: 13Answers: 0

    yes right

Sign In or Register to comment.