[AJAX] Grouper (ou non) un tableau de données

Salut !

Alors voilà je demande un peu d'aide, je souhaite trier des données avec ajax.
Imaginons mon tableau de données (mysql) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

Quantité | Description | Prix fruit1 | Prix fruit2 | Prix total | ---------------------------------------------------------------- 2 | fruit1 | 5 | 5 | 10 | 2 | fruit2 | 2 | 2 | 4 | 5 | fruit1 | 9 | 9 | 45 | 5 | fruit2 | 4 | 4 | 20 | 1 | fruit1 | 4 | 4 | 4 | 1 | fruit2 | 3 | 3 | 3 | 3 | fruit1 | 7 | 7 | 21 | 3 | fruit2 | 5 | 5 | 15 | ----------------------------------------------------------------

---

Les entrées sont toujours alternées "fruit1, fruit2, fruit1, fruit2 etc..."
Je voudrais donc afficher mon tableau de 2 manières différentes
Par défaut :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

Quantité | Description | Prix fruit1 | Prix fruit2 | Prix total | ---------------------------------------------------------------- 2 | fruit | 5 | - | 10 | 2 | fruit | - | 2 | 4 | 5 | fruit | 9 | - | 45 | 5 | fruit | - | 4 | 20 | 1 | fruit | 4 | - | 4 | 1 | fruit | - | 3 | 3 | 3 | fruit | 7 | - | 21 | 3 | fruit | - | 5 | 15 | ----------------------------------------------------------------

---

Et si l'utilisateur coche le checkbox "Grouper" :

Code:

---

1 2 3 4 5 6 7

Quantité | Description | Prix fruit1 | Prix fruit2 | Prix total | ---------------------------------------------------------------- 2 | fruit | 5 | 2 | 14 | 5 | fruit | 9 | 4 | 65 | 1 | fruit | 4 | 3 | 7 | 3 | fruit | 7 | 5 | 36 | ----------------------------------------------------------------

---

C'est à dire grouper 2 par 2 les lignes, en faisant un "total"
En espérant que certains ai suivi, et qu'ils puissent m'aiguiller :)
Merci bien !
Ciao

Je ne suis pas sûr que le point technique crucial soit dans l'appel ajax ici... l'appel sera des plus simples, mais c'est du côté SQL que la requête va changer, afin de trier les données en fonction de la demande de l'utilisateur.

Je suppose bien qu'on peut quand même faire ça côté client en javascript si c'était nécessaire, mais ça doit être plus lent (en plus d'être probablement assez complexe en manipulant le DOM pour ce genre de choses).

Salut et merci de ta réponse ultra rapide !
Alors en fait j'ai oublié de préciser : à l'origine mes données dans la base mysql sont déja groupées (+- le 3e bloc "code" de mon topic), donc ma requête dans les 2 cas sera la même.

C'est là qu'intervient ajax qui me servira à reconstruire l'un ou l'autre des 2 tableaux (groupés ou non) selon le choix de l'utilisateur.

Et c'est là que ça se gate un peu de mon côté :roll:

Salut,

Je pense qu'il y a une approche CSS relativement simple à ton
problème, voici l'idée avec ici les colonnes Prix fruit1, Prix fruit2
pour simplifier.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<table class='double'> <tr class='first'> <td>5</td> <td><span class='a'>-</span><span class='b'>2</span></td> </tr> <tr class='second'> <td>-</td> <td>2</td> </tr> </table>

---

En css

Code:

---

1 2 3 4 5 6

table.double tr.first span.a { display: inline; } table.double tr.first span.b { display: none; } table.single tr.first span.a { display: none; } table.single tr.first span.b { display: inline; } table.single tr.second { display: none; }

---

l'idée est qu'en appliquant une class='single' à ta table cela
suffise à changer la présentation.

Mais pour cela il faut coder les informations contenues dans les
"deuxièmes lignes" à l'intérieur de la première ligne (masquée par
le CSS en mode 'double'

Une autre approche plus propre mais plus compliquée serait de
construire la table dynamiquement sur la base de données pures

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var data = [ [r1_col1,r1_col2,r1_col3,r1_col4], [r2_col1,r2_col2,r2_col3,r2_col4], [r3_col1,r3_col2,r3_col3,r3_col4] ];   // dans ce goût là function buildTable(data) { var table = document.createElement('table'); for(var row=0;row<data.length;row++) { var tr = document.createElement('tr'); var cols = data[row]; for(var col=0;col<cols.length;col++) { var td = document.createElement('td'); td.innerHTML = cols[col]; tr.appendChild(td); } table.appendChild(tr); } return table; }

---

Te resterai a faire un fonction qui transforme le contenu
du tableau data suivant la représentation que tu souhaite.