Summe aller ausgewählten Zeilen in jQuery Datatables

Ich habe eine Spalte Betrag und verwendet haben, dieses https://datatables.net/examples/advanced_init/footer_callback.html zum berechnen der Summe für die auf Seite und off-Seite in der Fußzeile.

Gibt es auch in diesem Beispiel die Warnungen der Gesamtbetrag auf Seite und off-Seite.
https://datatables.net/examples/plug-ins/api.html

Was ich versuche zu erreichen ist, wie die Summe der Werte der ausgewählten Zeilen der Gehalt Spalten

Hier ist eines, das ich gebaut habe auf jsfiddle mit dem Zeilen-Auswahl durchgeführt und eine Fußzeile total fertig.

Aber ich kann nicht herausfinden, wie ich hinzufügen kann, eine Summe, Wert der Summe der selektierten Zeilen in der linken unteren Ecke der Zelle

http://jsfiddle.net/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');
} );
  • Sie wollen wählen Wert zählen?
  • ja, also, wenn Sie auf eine Zeile klicken, der Gehalt bekommt, summiert sich unten Links in der Fußzeile
  • im Grunde um die Summe aller Zeilen, die mit active-class gegen Sie aus Zeilen-Auswahl
  • Wie meinst du das "aktive Klasse gegen Sie aus der Zeile selection'? Gerade jetzt, deine Zeilen haben entweder .odd oder .even als Klassen. Die man als aktiv angesehen wird und was nicht?
  • Entschuldigung, die active-Klasse-name "ausgewählt", nicht "active". Also, wenn Sie auf eine Zeile klicken, die tr Klasse bekommt einen "selected" - Klasse Hinzugefügt, markieren Sie die Zeile, welches ausgewählt wurde. Ich möchte in der Lage sein, um Sie auf mehrere Zeilen und die Summe wird sich zeigen unten Links in der Fußzeile
  • prüfen Sie die Antwort, kann sein u brauchen diese @adamgouldie

InformationsquelleAutor adam gouldie | 2015-03-09
  1. 1

    Versuchen, diese funktionsfähige Demo

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

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

    });
    InformationsquelleAutor I'm Geeker
  2. 0
    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

    • Vielen Dank, aber in diesem Beispiel nicht automatisch die Summe aller Werte in der Fußzeile angezeigt. Sie müssen auf eine Schaltfläche klicken, die für die Berechnung
    InformationsquelleAutor Satinder singh
  3. 0

    Fügen Sie eine Klasse .sum im th element, das zeigt die Summe. Erstellen Sie auch einen sum variable und initialisieren Sie es oben in Ihrem javascript-code.
    Ändern Sie dann Ihren code, schaltet die selected Klasse zu diesem:

    $('#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');
} );

    Und hier ist eine funktionierende JFiddle

    InformationsquelleAutor kidA
  4. 0

    Könnte man überprüfen, ob eine Zeile ausgewählt wurde oder nicht, indem $(this)[0].classList.contains("selected"). Dann addieren Sie die Menge von der 5. Spalte der Zeile $(this).find(':nth-child(5)') auf die Höhe des $('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, "")));
}

    Hier ein DEMO

    InformationsquelleAutor Raein Hashemi
Schreibe einen Kommentar