jquery datatables - somme des colonnes au sein d'un groupe

Je suis tellement proche de faire exactement ce que je veux, juste besoin d'un peu d'aide.

J'ai le groupement des de travail. Maintenant, je veux faire la somme des colonnes pour chaque groupe et afficher le total dans l'en-tête de groupe. Voici un jsfiddle de lui car il est plus facile de montrer ce que je suis en train de faire:

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

Le code:

$(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 somme ne sont pas additionnées. Les valeurs sont affichées, mais comme une chaîne de caractères au lieu de les additionner ensemble comme des numéros. Aussi, toutes les valeurs sont même affichés comme une chaîne, il y a des répétitions de passe. J'ai essayé de convertir en utilisant le Nombre() et parseInt (), mais pas de chance. Je suis en train de tout mettre dans la fonction de rappel (comme la fonction de groupement), de sorte que les valeurs seront additionnés après chaque filtre de table, trop.

Je suis sûr que j'ai une variable de mal ou au mauvais endroit ou quelque chose, mais je ne peux pas le comprendre. Très proche!!!! 🙁

TIA,
Matt

pour la colonne u voulez et ce que sont les groupes?
Pour l'ajout de toutes les cellules dans la 5e colonnes utiliser cette $("table tr td:nth-child(4)").each(function() { total += parseFloat($(this).text()); });
Merci pour l'aide. Je me suis rapproché mais pas encore tout à fait là. J'ai mis à jour mon jsfiddle pour montrer où je suis maintenant. jsfiddle.net/RgKPZ/126
Lorsque l'on regarde le violon, vous verrez le groupe de contenus (job 1, 2, etc). Juste en-dessous est un zéro, qui est l'endroit où je suis en train de mettre la somme des "procès-verbal de la somme de la colonne". Décommentant la ligne 48 dans le js est là que je suis bloqué. Il n'est pas somme correctement (renvoie NaN) et il remplace l'ensemble de la ligne au lieu de simplement la div que je veux y mettre la somme dans. Il semble également que seulement les deux premiers groupes au lieu de tous les trois. J'ai essayé de jouer avec les sélecteurs et autres jquery choses pour un certain temps maintenant et ne peut pas se fissurer.
k je vais vérifier et mettre à jour l'u.

OriginalL'auteur Matt | 2013-05-25

  1. 6

    ...

    Changer tous les <div id='group_sum'>0</div> à <div class='group_sum'></div> parce que l'id doit être unique. donc utiliser la classe

    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);
}
});
//-------------------------------------------------
}
});
});
    OMG. Merci beaucoup! J'ai beaucoup appris en voyant comment vous modifié ma fonction. La vôtre semble plus simple/plus élégante que la mienne, qui est probablement la raison pour laquelle cela fonctionne réellement. 🙂 Et bah sur moi pour l'id vs classe de chose. Encore une fois, merci! Vous avez fait ma semaine!

    OriginalL'auteur Lakshmana Kumar