jquery datatables - additionner les colonnes d'un groupe

Question

Je suis si près d'obtenir exactement ce que je veux, j'ai juste besoin d'un peu d'aide.

Le regroupement fonctionne. Je veux maintenant additionner les colonnes de chaque groupe et afficher le total dans l'en-tête du groupe. Voici un jsfiddle de la chose puisque c'est plus facile de montrer ce que j'essaie de faire :

http://jsfiddle.net/RgKPZ/123/

Le code correspondant :

$(function() {
            oTable = $('#job_history').dataTable({

                "aoColumnDefs": [
                    { "bVisible": false, "aTargets": [ 4,5,6 ] },
                ],
                "aLengthMenu": [[10, 25, 50, -1], ["Show 10 entries", "Show 25 entries", "Show 50 entries", "Show all entries"]], // options in the show rows selector
                "iDisplayLength" : -1, // show all rows by default
                "aaSortingFixed": [[ 5, 'asc' ]],
                "aaSorting": [[ 5, 'asc' ]],
                "bJQueryUI": true,
                "sDom": '<flip>', // filter, length, info, pagination

                "oLanguage": {
                    "sSearch": "", // label for search field - see function below for setting placeholder text
                    "sLengthMenu": "_MENU_", // label for show selector { "sLengthMenu": "Display _MENU_ jobs" }
                    "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries.", // string for information display
                    "sInfoEmpty": "No entries to show", // what to show when info is empty
                    "sInfoFiltered": " (Filtering from _MAX_ entries.)",
                    "sEmptyTable": "There are no entries matching the search criteria.", // shown when table is empty, regardless of filtering
                    "sZeroRecords": "", // shown when nothing is left after filtering
                },

                "fnDrawCallback": function ( oSettings ) {
                    if ( oSettings.aiDisplay.length == 0 )
                    {
                        return;
                    }

                    var nTrs = $('#job_history tbody tr'); // get all table rows
                    var iColspan = nTrs[0].getElementsByTagName('td').length;
                    var sLastGroup = "";
                    var summed_minutes = 0;

                    for (var i = 0; i < nTrs.length; i++)
                    {
                        var iDisplayIndex = oSettings._iDisplayStart + i;
                        var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[ 5 ];

                        if ( sGroup != sLastGroup )
                        {
                            var nGroup = document.createElement( 'tr' );
                            var nCell = document.createElement( 'td' );
                            nCell.colSpan = iColspan;
                            nCell.className = "group";

                            summed_minutes += oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[ 7 ];
                            nCell.innerHTML = sGroup + summed_minutes;
                            nGroup.appendChild( nCell );
                            nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
                            sLastGroup = sGroup;
                        }
                    }
                }

            });

        });

Le seul problème est que les colonnes que je veux additionner ne le sont pas. Les valeurs sont affichées, mais comme une chaîne de caractères, au lieu d'être additionnées comme des nombres. De plus, toutes les valeurs ne sont pas affichées comme une chaîne de caractères - il y a des répétitions. J'ai essayé de convertir en utilisant Number() et parseInt() mais sans succès. J'essaie de mettre cela dans la fonction de rappel (comme la fonction de regroupement) afin que les valeurs soient également additionnées après chaque filtre de tableau.

Je suis sûr que je me trompe de variable ou que je la place au mauvais endroit, mais je n'arrive pas à comprendre. C'est frustrant d'être si près du but ! :-(

TIA, Matt

Answer 1

Essayez ceci...

Modifier tout <div id='group_sum'>0</div> à <div class='group_sum'></div> parce que l'identifiant doit être unique.

Voir dans violon

  $(function() {
    var oTable = $('#job_history').dataTable({
        "aoColumnDefs": [{ "bVisible": false, "aTargets": [4, 5, 6]}],
        "aLengthMenu": [[10, 25, 50, -1], ["Show 10 entries", "Show 25 entries", "Show 50 entries", "Show all entries"]],
        "iDisplayLength": -1,
        "aaSortingFixed": [[5, 'asc']],
        "aaSorting": [[5, 'asc']],
        "bJQueryUI": true,
        "sDom": '<flip>',
        "fnDrawCallback": function(oSettings) {
            if (oSettings.aiDisplay.length == 0) {
                return;
            }

            // GROUP ROWS
            var nTrs = $('#job_history tbody tr');
            var iColspan = nTrs[0].getElementsByTagName('td').length;
            var sLastGroup = "";

            for (var i = 0; i < nTrs.length; i++) {
                var iDisplayIndex = oSettings._iDisplayStart + i;
                var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[5];

                if (sGroup != sLastGroup) {
                    var nGroup = document.createElement('tr');
                    var nCell = document.createElement('td');
                    nCell.colSpan = iColspan;
                    nCell.className = "group";
                    nCell.innerHTML = sGroup;
                    nGroup.appendChild(nCell);
                    nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
                    sLastGroup = sGroup;
                }
            }
            //-------------------------------------------------
            // SUM COLUMNS WITHIN GROUPS
            var total = 0;
            $("#job_history tbody tr").each(function(index) {
                if ($(this).find('td:first.group').html()) {
                    total = 0;
                } else {
                    total = parseFloat(total) + parseFloat(this.cells[4].innerHTML);
                    $(this).closest('tr').prevAll('tr:has(td.group):first').find("div").html(total);
                }
            });
            //-------------------------------------------------
        }
    });
});