IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Pagination [Sources]


Sujet :

JavaScript

  1. #1
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut Pagination
    Bonjour,
    Dans ma page j'ai un tableau de 40 colonnes (ou plus) que je voudrais 'découper', c-a-d ajouter deux lien "<Precedent" et "Suivant>" qui permettent de simuler une pagination sur le tableau.
    Merci
    '...parfois l'informatique peut vous rendre fou...'

  2. #2
    Invité
    Invité(e)
    Par défaut


    ta page est generée dynamiquement ? si oui tu devrais voir le forum de ton langage serveur (PHP?) pour ça...

  3. #3
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut
    oui ma page est dynamique, mais je ne veux pas faire de la pagination en php car ma page est très complexe, oublions que c'est du PHP, on suppose que j'ai un long tableau que je voudrer découper en JS
    '...parfois l'informatique peut vous rendre fou...'

  4. #4
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 47

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    tu veux faire defiler les colonnes ?

    pourquoi ne pas mettre ta table dans un div avec un overflow auto et un width défini ?

    ca te mettra du scroll horizontal
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

  5. #5
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 47

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    Code : 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
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    <script type='text/javascript'>
     
    	var nbCols = 10;
    	var startPos = 0;
    	var maxCols = 0;
     
    	function decoupeTable&#40;idtable&#41;&#123;
    		var tble = document.getElementById&#40;idtable&#41;;
    		var nav  = document.createElement&#40;"div"&#41;;
    		var tb   = tble.getElementsByTagName&#40;"tbody"&#41;&#91;0&#93;;
    		var lig	 = tble.getElementsByTagName&#40;"tr"&#41;;
    		var next = document.createElement&#40;"input"&#41;;
    		var prev = document.createElement&#40;"input"&#41;;
     
    		next.type = "button";
    		next.value = ">";
    		next.onclick = function&#40;&#41;&#123;
    			if&#40;startPos+nbCols != maxCols&#41;&#123;
    				for&#40;var i=0;i<lig.length;i++&#41;&#123;
    					lig&#91;i&#93;.childNodes&#91;startPos&#93;.style.display = "none";
    					lig&#91;i&#93;.childNodes&#91;startPos+nbCols&#93;.style.display = "";
    				&#125;
    				startPos++;
    			&#125;
    		&#125;
    		prev.type = "button";
    		prev.value = "<";
    		prev.onclick = function&#40;&#41;&#123;
    			if&#40;startPos != 0&#41;&#123;
    				startPos--;
    				for&#40;var i=0;i<lig.length;i++&#41;&#123;
    					lig&#91;i&#93;.childNodes&#91;startPos&#93;.style.display = "";
    					lig&#91;i&#93;.childNodes&#91;startPos+nbCols&#93;.style.display = "none";
    				&#125;
    			&#125;
    		&#125;
     
    		nav.appendChild&#40;prev&#41;;
    		nav.appendChild&#40;next&#41;;
    		tble.parentNode.insertBefore&#40;nav,tble&#41;;
     
    		maxCols = lig&#91;0&#93;.childNodes.length;
     
    		for&#40;var i=0;i<lig.length;i++&#41;&#123;
    			var cells = lig&#91;i&#93;.childNodes;
    			for&#40;var j=nbCols;j<maxCols;j++&#41;&#123;
    				cells&#91;j&#93;.style.display = "none";
    			&#125;
    		&#125;
    	&#125;
     
    	window.onload = function&#40;&#41;&#123;
    		decoupeTable&#40;'matable'&#41;;
    	&#125;
    </script>
     
    <div id='stpos'></div>
    <?
    	echo "<table id='matable' border='1'>
    			<tbody>";
    	for&#40;$i=0;$i<5;$i++&#41;&#123;
    		echo "<tr>";
    		for&#40;$j=0;$j<50;$j++&#41;
    			echo "<td>",$i," ",$j,"</td>";
    		echo "</tr>";
    	&#125;
    	echo "</tbody>
    		</table>";
    ?>
    bon le code peut etre optimisé, j'ai fais ca vite fais
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

  6. #6
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut
    merci very much c'est exactement ce que je cherche
    '...parfois l'informatique peut vous rendre fou...'

  7. #7
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut
    siddh > est-il possible de ne PAS faire scroller la première colonne ? c-a-d quand je clique sur > la colonne 1 reste affichée mais les autres son décalée ?
    Merci
    '...parfois l'informatique peut vous rendre fou...'

  8. #8
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 47

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    bien sur,
    il suffit de mettre :
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    prev.onclick = function&#40;&#41;&#123;
             if&#40;startPos != 1&#41;&#123;
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

  9. #9
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    si t'as le temps, j'avais fait ça pour simuler l'affichage page par page, sans php: http://javatwist.imingo.net/pppjs.php

    les fonctions js sont dans le fichier http://javatwist.imingo.net/pppjs.js

    teste toujours voir si le principe t'intéresse (mais j'ai pas mis à jour depuis longtemps)

  10. #10
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 47

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    oui la je fais ma table en php car j'avais la flemme
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

  11. #11
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut
    comment on fait pour le décalage se fasse en N colonne et non pas UNE colonne ? c-a-d que je voudrais faire comme dans l'exemple de javatwister, quand je clique sur Next j'affiche les N prochaines nolonnes (et non pas seulement la colonne prochaine)
    J'ai fais ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
          var bloc = 10;
    ....
    ....
          next.onclick = function&#40;&#41;&#123; 
             if&#40;startPos+nbCols != maxCols&#41;&#123; 
    			for&#40;var k=0;k<bloc;k++&#41;&#123;			 
    				for&#40;var i=0;i<lig.length;i++&#41;&#123; 
    				   lig&#91;i&#93;.childNodes&#91;startPos&#93;.style.display = "none"; 
    				   lig&#91;i&#93;.childNodes&#91;startPos+nbCols&#93;.style.display = ""; 
    				&#125; 
    				startPos++; 
    			&#125;
             &#125; 
          &#125;
    mais il y a pb d'affichage quand le nbr total des colonne n'est un un multiple de bloc
    Exp :
    12 colonnes
    bloc = 10
    Quand je clique sur > j'ai ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    0 4  0 5  0 6  0 7  0 8  0 9  0 10  0 11  0 12  
    1 3  1 4  1 5  1 6  1 7  1 8  1 9   1 10  1 11  1 12  
    2 3  2 4  2 5  2 6  2 7  2 8  2 9   2 10  2 11  2 12  
    3 3  3 4  3 5  3 6  3 7  3 8  3 9   3 10  3 11  3 12  
    4 3  4 4  4 5  4 6  4 7  4 8  4 9   4 10  4 11  4 12
    '...parfois l'informatique peut vous rendre fou...'

  12. #12
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut
    c'est bon j'ai trouvé
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
         next.onclick = function&#40;&#41;&#123; 
             for&#40;var k=0;k<bloc;k++&#41;&#123;          
             if&#40;startPos+nbCols != maxCols&#41;&#123; 
                for&#40;var i=0;i<lig.length;i++&#41;&#123; 
                   lig&#91;i&#93;.childNodes&#91;startPos&#93;.style.display = "none"; 
                   lig&#91;i&#93;.childNodes&#91;startPos+nbCols&#93;.style.display = ""; 
                &#125; 
                startPos++; 
             &#125; 
             &#125; 
          &#125;
    il suffisait de mettre la condition DANS la boucle pant avant
    '...parfois l'informatique peut vous rendre fou...'

  13. #13
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut
    siddh > j'ai un autre pb maintenant en fixant la première colonne, il y a une colonne qui ne s'affiche plus !
    Exp :
    Max Colonnes : 8
    Colonnes affichées : 5
    Bloc : 5

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    0 1  0 2  0 3  0 4  0 5  
    1 1  1 2  1 3  1 4  1 5   
    2 1  2 2  2 3  2 4  2 5   
    3 1  3 2  3 3  3 4  3 5   
    4 1  4 2  4 3  4 4  4 5
    click sur >

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    0 1  0 4  0 5  0 7  0 8  
    1 1  1 4  1 5  1 7  1 8  
    2 1  2 4  2 5  2 7  2 8  
    3 1  3 4  3 5  3 7  3 8  
    4 1  4 4  4 5  4 7  4 8
    La colone 6 ne s'affiche plus !!!
    '...parfois l'informatique peut vous rendre fou...'

  14. #14
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    ne te casse pas la tê ce que tu cherche existe déjà et optimisé multi navigateur

    http://openrico.org/rico/livegrid.page

    rico est un développement open source de composant "riche" en javascript

    http://openrico.org/rico/home.page

    A+JYT

  15. #15
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut
    tout est ok sauf que maintenant je voudrais placer les bouton ailleur qu'au dessus du tableau, j'ai essayé de faire un lien 'raccourçi' mais ça ne marche pas !! j'ai pourtant donné des noms aux 2 boutons !!
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    ...
          next.name = "bNext";
    ...
    <a href="#" onClick="bNext.click&#40;&#41;"> Suivant </a>
    '...parfois l'informatique peut vous rendre fou...'

  16. #16
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 47

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    tble.parentNode.insertBefore&#40;nav,tble&#41;; 
    nav.id = "unid";
    apres en style :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #unid&#123;
        position&#58; absolute;
        top&#58; 100px;
        left&#58; 100px;
    &#125;
    enfin apres t'en fais ce que tu veux.

    pour les boutons :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    prev.className = 'uneclasse';
    next.className = 'unclasse';
    en style :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .uneclasse&#123;
     
    &#125;
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

  17. #17
    Membre averti Avatar de sami_c
    Profil pro
    Chef de projet
    Inscrit en
    Mai 2002
    Messages
    746
    Détails du profil
    Informations personnelles :
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Chef de projet

    Informations forums :
    Inscription : Mai 2002
    Messages : 746
    Points : 342
    Points
    342
    Par défaut
    avec cette méthode, les boutons sont placés dans une position bien données, or le contenu de ma page peut varier et donc les positions peuvent êtres mauvaise comment faire pour que la position verticale soit en fonction de la hauteur du tableau ?
    PS : pourquoi après avoir défini un nom pour les bouton et en créeant un lein comme celui ci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     <a href="#" onClick="bNext.click&#40;&#41;"> Suivant </a>
    ça ne marche pas ???!!!
    ça ne marche que si j'utilise ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     <a href="#" onClick="document.forms&#91;0&#93;.elements&#91;0&#93;.click&#40;&#41;"> Suivant </a>
    même ceci ne fonctionne pas :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     <a href="#" onClick="document.forms&#91;0&#93;.elements&#91;"bNext"&#93;.click&#40;&#41;"> Suivant </a>
    '...parfois l'informatique peut vous rendre fou...'

  18. #18
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 47

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    pas trop compris ton histoire de vertical

    met un id plutot aux boutons et ensuite tu feras :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById&#40;'bnext'&#41;.click&#40;&#41;
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

Discussions similaires

  1. Pagination : numéroter sous la forme (1/4)
    Par audreyb dans le forum SAP Crystal Reports
    Réponses: 8
    Dernier message: 01/03/2013, 12h59
  2. [VB.NET] Pagination DataGrid (où est l'erreur?)
    Par franculo_caoulene dans le forum ASP.NET
    Réponses: 2
    Dernier message: 25/10/2004, 12h46
  3. [C#] Probleme de pagination dans datagrid
    Par asphareth dans le forum ASP.NET
    Réponses: 2
    Dernier message: 21/07/2004, 12h25
  4. [VB.NET] Pagination DataGrid
    Par sehing dans le forum ASP.NET
    Réponses: 5
    Dernier message: 20/07/2004, 17h28
  5. Réponses: 15
    Dernier message: 20/07/2004, 10h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo