I have a amount column and have used this .html to calculate the total for on page and off page into the footer.

There is also this example which alerts the total amount on page and off page. .html

What i am trying to achieve is how to sum the values of selected rows of the salary columns

Here is one I built on jsfiddle with the rows selection done and a footer total done.

But I can't figure out how I can add a sum value of the total of selected rows in the bottom left hand corner cell

/

$('#example').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( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            } );

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

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

$('#example tbody').on('click', 'tr', function () {

    $(this).toggleClass('selected');
} );

I have a amount column and have used this https://datatables/examples/advanced_init/footer_callback.html to calculate the total for on page and off page into the footer.

There is also this example which alerts the total amount on page and off page. https://datatables/examples/plug-ins/api.html

What i am trying to achieve is how to sum the values of selected rows of the salary columns

Here is one I built on jsfiddle with the rows selection done and a footer total done.

But I can't figure out how I can add a sum value of the total of selected rows in the bottom left hand corner cell

http://jsfiddle/ebRXw/190/

$('#example').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( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            } );

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

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

$('#example tbody').on('click', 'tr', function () {

    $(this).toggleClass('selected');
} );

• javascript
• jquery
• datatable

Share Improve this question Follow asked Mar 9, 2015 at 11:31 adam gouldieadam gouldie 26144 silver badges1717 bronze badges 6

• you want select value count? – Deenadhayalan Manoharan Commented Mar 9, 2015 at 11:39
• yes so when you click a row, the salary gets summed in the bottom left footer – adam gouldie Commented Mar 9, 2015 at 11:41
• basically to sum all rows that have active class against it from row selection – adam gouldie Commented Mar 9, 2015 at 11:45
• How do you mean 'active class against it from row selection'? Right now, your table rows have either .odd or .even as classes. Which one is considered active and which isn't? – kidA Commented Mar 9, 2015 at 11:48
• apologies, the active class name is "selected" not "active". So when you click a row, the tr class gets a "selected" class added to highlight the row wich has been selected. I want to be able to click multiple rows and the sum will show in the bottom left footer – adam gouldie Commented Mar 9, 2015 at 11:51

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

Add a class of .sum in the th element that shows the total sum. Also, create a sum variable and initialize it at the top of your javascript code. Then, change your code that toggles the selected class to this:

$('#example tbody').on('click', 'tr', function () {

        var price = parseInt(($(this).find('td').last().html()).replace(/\$|,/g, ''));
        if($(this).hasClass('selected')) {
           sum -= price;
        } else {
           sum += price;
        }
        $('.sum').html(sum);
        $(this).toggleClass('selected');
} );

And here is a working JFiddle

Try this Working Demo

 $('#example tbody').on('click', 'tr', function () {

        $(this).toggleClass('selected');
        $('#button').trigger('click');
        console.log($('tfoot tr > th').eq(1).html( '$'+ $('#selectedtotal').html()));        

    });

var totalSUM = 0;
$("tbody tr.selected").each(function () {
    var getValue = $(this).find("td:eq(4)").html().replace("$", "");
    var filteresValue = getValue.replace(/\,/g, '');
    totalSUM += Number(filteresValue)
    console.log(filteresValue);
});
alert(totalSUM);

JS FIDDLE

You could check if a row has been selected or not by $(this)[0].classList.contains("selected"). Then add the amount of the 5th column of the row $(this).find(':nth-child(5)') to the amount of the $('sum'):

if($(this)[0].classList.contains("selected"))
{
        $('#sum').html(
            parseFloat($('#sum').html()) + 
            parseFloat($(this).find(':nth-child(5)').html().replace(/[$,]/g, "")));
}

else
{
        $('#sum').html(
        parseFloat($('#sum').html()) -
        parseFloat($(this).find(':nth-child(5)').html().replace(/[$,]/g, "")));
}

Here's a DEMO