Discussion :

[encoremoi21258]

Bonjour

Sur mon site que j'essaye de rendre autant que possible compatible avec les mobiles, j'ai un problème car il comporte plusieurs tableaux.

En voici un:



Sur l'une des pages qui contient un tableau j'ai mis en place une présentation alternative sous forme de paragraphes en répétant à chaque fois le nom de la colonne, par exemple:

Ligne 1:
Titre 1: Contenu
Titre 2: Contenu
Titre 3: Contenu

Ligne 2:
Titre 1: Contenu
Titre 2: Contenu
Titre 3: Contenu


Ligne 3:
Titre 1: Contenu
Titre 2: Contenu
Titre 3: Contenu

En affichant ou masquant ceci en fonction de la largueur. Ça fonctionne bien avec un petit tableau, mais la page dont je m'occupe actuellement peut avoir un tableau de 70 lignes. Du coup une présentation similaire ferait 70 paragraphes, 1 ligne de libre entre chaque paragraphe, et 8 lignes par paragraphe. Autant dire que la longueur serait telle qu'une utilisation sur téléphone semble presque impossible.

Du coup j'aimerais savoir s'il y a une autre solution que vous connaissez.

Merci d'avance

[JujuPomme]

Hello,

J'ai déjà utilisé ce plugin Jquery qui ma foi était pas trop mal: https://datatables.net/. Il est responsive et il est vraiment pas mal paramétrable en tout point, donc ça peut peut-être te convenir !

Bon courage

[encoremoi21258]

Bonjour,

J'ai fais ce qui a été demandé et ça a rajouté le class DataTable à mon tableau donc ça a certainement été inclus comme il faut, mais le tableau ne ressemble absolument pas à ça et surtout il n'est pas du tout responsive. Le seul effet visible est qu'il a prit 100% de la largueur disponible alors qu'avant il n'avait que la largueur nécessaire pour afficher le texte.

[JujuPomme]

Hello,

Peux-tu poster le code associé?

Si tu regardes bien l'exemple de la page d'accueil de DataTables, il est bien responsive (les colonnes en trop passent en ligne qu'il faut déployer via un (+) )

[encoremoi21258]

Dans le head j'ai rajouté:

Code HTML :

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

1
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"> 
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

Ainsi que

Code HTML :

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

1
2
3
<script>$(document).ready( function () {
$('#tbl_q_ili').DataTable();
} );</script>

Et pour le tableau:

Code HTML :

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
	<TABLE class='tbl_q_ili' id='tbl_q_ili'><TR> 
			<TH> Quête </TH> 
				<TH> Objectif </TH> 
				<TH> Tutoriel </TH> 
				<TH width='50px;'> Etape finale </TH>
				<TH> Etape<br/>en cours </TH>
				<TH> Points<br/>donnés<br/>par la<br/>quête </TH>
				<TH> Terminée<br/>le </TH> 
 
</TR><TR><TD>Les ciseaux</TD><TD>Obtenir un lot de 5 ciseaux</TD><TD><a href='lesite' target='_blank'>Cliquez ici</a></TD><TD>1</TD><TD>0</TD><TD>1</TD><TD>Non commencée</TD></TR>
<TR><TD>La larme d'étoile</TD><TD>Obtenir 1 larme d'étoile</TD><TD><a href='lesite' target='_blank'>Cliquez ici</a></TD><TD>1</TD><TD>0</TD><TD>1</TD><TD>Non commencée</TD></TR>
<TR><TD>Ticket à FireHornMameo</TD><TD>Echanger au minimum 1 ticket à FireHornMameo</TD><TD><a href='lesite' target='_blank'>Cliquez ici</a></TD><TD>1</TD><TD>0</TD><TD>1</TD><TD>Non commencée</TD></TR>
<TR><TD>Ticket à hench</TD><TD>Echanger au minimum un ticket à hench</TD><TD><a href='lesite' target='_blank'>Cliquez ici</a></TD><TD>1</TD><TD>0</TD><TD>1</TD><TD>Non commencée</TD></TR>
<TR><TD>Set du croissant amélioré</TD><TD>Obtenir un set du croissant amélioré en entier</TD><TD><a href='lesite' target='_blank'>Cliquez ici</a></TD><TD>9</TD><TD>0</TD><TD>1</TD><TD>Non commencée</TD></TR>
 
</TABLE>

Du coup le tableau (le premier) n'a que sa largueur modifiée. Mais si la largeur de la page se réduit, il n'est pas pour autant responsive, et surtout il n'y a pas de +.

[JujuPomme]

Hello,

Ton tableau n'est pas valide, il lui manque une bonne arborescence que je te laisse regarder sur cet exemple : https://datatables.net/manual/installation#HTML

[encoremoi21258]

Bon moi et l'anglais ... je vous remercie pour le lien.

Du coup c'est déjà mieux et j'en ai profité pour traduire le texte.



D'ailleurs je vais utiliser ce système ailleurs tellement c'est pratique.

Par contre toujours pas de responsive ...



J'ai viré les autres tableaux pour être certain que c'est bien celui qui utilise le DataTable qui cause le barre de défilement horizontale car il est trop largue.

[JujuPomme]

Bon, puisque tu as l'air un peu fâché avec la doc (gloire à elle), quelques tips supplémentaires :
- Dans les classes CSS de ton tableau, tu dois avoir à minima (avec les inclusions de feuilles de style nécessaires)

Code :

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

class="display responsive nowrap"

(tableau d'exemple)

Code :

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

<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">

- De plus, je te mets en garde concernant l'id de ta table et sa classe. Je te conseille vivement de différencier distinctement les deux. Je ne connais pas la convention exacte, je te laisse la recherche nécessaire si tu veux rentrer dans les clous

[encoremoi21258]

Magnifique incroyable splendide inouï stupéfiant, j'y suis enfin arrivé. Tout ce qui est doc c'est vraiment pas mon truc, surtout en anglais.

Cela me permettra enfin de virer les 350 boutons (non non il y en a autant, le 0 n'est pas de trop) qui servent à voir les 350 pages d'un classement sur une autre page, vous me sauvez la vie

Par contre quand le contenu d'une case écrit à l'horizontal sans sauter de ligne dépasse la largueur disponible, ça met une scollbar. Mais je suppose que c'est normal et que le fait que ce soit bloqué sur une seule ligne est volontaire puisque tout le reste fonctionne comme sur l'exemple.