Discussion :

[clavier12AZQSWX]

bonjour,

j'ai un tableau de 30 colonnes.

j'ai 25 colonnes que je fusionne en une pour faciliter et alléger l'affichage car les 25 colonnes ne sont pas forcément remplies pour chaque ligne.

pour cela, j'ai pris chacune des 24 colonnes qui suivent, et j'ai concaténé le contenu avec la précédente puis j'ai supprimé la colonne. je le fais donc 24 fois.
mais voilà, ça prend du temps, ça se voit "en flashant" sur la navigateur dès que la page est ouverte.

j'aimerais savoir si il y a moyen de le faire plus rapidement côté client que ma méthode ou sinon, peut-être sans utiliser jquery.

voilà ce que je fais 24fois :

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});

en gros : je sélectionne la colonne 9 (à partir de 8 que les 25 colonnes sont présentes) , je prends le TR et le TH et TD fils, je concate le contenu avec le .prev (précédent) et je termine par un .remove pour supprimer définitivement la colonne 9
au prochain tour, il reste donc 24-1 colonnes, donc je prends encore la colonne 9.. et ainsi de suite.

donc au final j'ai ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});
$("#tbl_montableau tr th:nth-child(9),#tbl_montableau tr td:nth-child(9)").each(function()
				{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});

j'aurai pu faire un FOR mais j'ai pas trouvé comment mettre la variable itérative dans le selector et de toute façon , ça n'aurait pas accéléré les choses côté navigateur. au pire, ça aurait consommé de la mémoire en plus!

donc, avez-vous une autre idée ?

[Toufik83]

Bonjour,

Il faudrait utiliser le sélecteur gt() (greater than en anglais, supérieur à en français) au lieu de nth-child() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$("#tbl_montableau tr th:gt(9),#tbl_montableau tr td:gt(9)")
.each(function() {
  $(this).prev().html(
  	$(this).prev().html() + " " + $(this).html()
  ).end().remove();
});
$('thead th').last().html('Col-Group');//modifier le html du dernier th

Avec ça, le tour est joué en une seule fois.

[clavier12AZQSWX]

l'idée du gt est bonne mais similaire à celle d'une itération sur l'id de colonne.


le problème reste la lenteur coté client car JQ rafraichit après chaque modification de colonne.
ce serait bien d'avoir une instruction jq pour dire :
- démarrer un ensemble de commande (debut transation)
- ne pas flusher/updayer/mettre à jour le broswer visuellement
- finir la transaction
- mettre à jour le browser

au départ je le faisais pour 4 colonnes, puis 10, ça se voyait pas à l'oeil , après 24 colonnes sur un tableau à bcp de lignes, ça se voit suivant la lenteur du PC/navigateur.
ça se voit car ça fait un clignotement, un peu un "lag" comme dans un vieux jeu vidéo (effet clipping pour ceux qui connaissent).

j'ai testé dans excell, ça fait un coulissement (donc c'est joli même si ça se voit).
dans google Sheet online, j'arrive pas à trouver la fonction de fusion de colonne.

[Toufik83]

Bonjour,

J'avais testé l'exemple sur un tableau de 50 lignes et 30 colonnes, et ça n'a pas ramé, à moins que vous mettiez des console.log à l'intérieur de la boucle traitante des lignes du tableau.

Vous pouvez aussi utiliser deux tableaux, l'original et un autre en cascade (invisible), et dès qu'il soit prêt vous supprimez le premier pour afficher le deuxième.