Affichage sur plusieures pages

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Affichage sur plusieures pages

Re: Affichage sur plusieures pages

par ruca » 28 févr. 2012, 17:11

Coucou tout le monde,
donc j'ai suivi l'exemple en php de moogli que j'ai réussi à faire fonctionner nickel avec mon code, oufff...

Merci à tous de vous être penché sur mon cas et à tantôt pour de nouvelles questions ;)

Merci Thibaud C tjrs la pour aider.
++

Re: Affichage sur plusieures pages

par moogli » 28 févr. 2012, 13:55

wé enfin, c'est pas accessible, donc exit lecteur braille / audio et consort ^^

Le JS pourquoi pas mais y a des limites et quand ça nuit à la navigation non c'est un trop (essai d'aller voir un mail google en console ^^)

@+

Re: Affichage sur plusieures pages

par Thibaud C » 28 févr. 2012, 13:31

J'ai déja prevenu qu'il ne fallait pas "trop" d'enregistrement.
De plus si on doit partir du principe que le JS est désactivé, on irait pas bien loin, tous les sites webs dynamiques seraient inutilisables.. enfin chacun ses gouts !

Re: Affichage sur plusieures pages

par xTG » 28 févr. 2012, 12:39

Je déconseille ouvertement l'utilisation de JS pour paginer plus de 100 enregistrements.
J'ai eu à développer un logiciel listant plusieurs centaines de lignes (entre 300 et 700) et quelque soit le plugin de pagination que j'ai pu utiliser on arrivait à des attentes de plusieurs secondes.
De plus comme le dit moogli si le JS est désactivé bah dommage t'obtiendras tout sur une page et tu retourneras à ton problème initial...

Re: Affichage sur plusieures pages

par Thibaud C » 28 févr. 2012, 11:36

Justement, je pourrais voir ton html :) ? car ca vient forcement de la, car ce module jquery fonctionne bien ( d'ailleurs tu dois pouvoir tester les exemples donnés ;)

Re: Affichage sur plusieures pages

par ruca » 28 févr. 2012, 11:23

Coucou,

Code : Tout sélectionner

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript'> $(document).ready( function () { var oTable = $('#example').dataTable(); new FixedHeader( oTable ); } ); $.fn.dataTableExt.oPagination.links = { "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) { var nFirst = document.createElement( 'a' ); var nPrevious = document.createElement( 'a' ); var nList = document.createElement( 'span' ); var nNext = document.createElement( 'a' ); var nLast = document.createElement( 'a' ); nFirst.innerHTML = oSettings.oLanguage.oPaginate.sFirst; nPrevious.innerHTML = oSettings.oLanguage.oPaginate.sPrevious; nNext.innerHTML = oSettings.oLanguage.oPaginate.sNext; nLast.innerHTML = oSettings.oLanguage.oPaginate.sLast; var oClasses = oSettings.oClasses; nFirst.className = oClasses.sPageButton+" "+oClasses.sPageFirst; nPrevious.className = oClasses.sPageButton+" "+oClasses.sPagePrevious; nNext.className= oClasses.sPageButton+" "+oClasses.sPageNext; nLast.className = oClasses.sPageButton+" "+oClasses.sPageLast; nPaging.appendChild( nFirst ); nPaging.appendChild( nPrevious ); nPaging.appendChild( nList ); nPaging.appendChild( nNext ); nPaging.appendChild( nLast ); $(nFirst).bind( 'click.DT', function () { if ( oSettings.oApi._fnPageChange( oSettings, "first" ) ) { fnCallbackDraw( oSettings ); } } ); $(nPrevious).bind( 'click.DT', function() { if ( oSettings.oApi._fnPageChange( oSettings, "previous" ) ) { fnCallbackDraw( oSettings ); } } ); $(nNext).bind( 'click.DT', function() { if ( oSettings.oApi._fnPageChange( oSettings, "next" ) ) { fnCallbackDraw( oSettings ); } } ); $(nLast).bind( 'click.DT', function() { if ( oSettings.oApi._fnPageChange( oSettings, "last" ) ) { fnCallbackDraw( oSettings ); } } ); /* Take the brutal approach to cancelling text selection */ $('a', nPaging) .bind( 'mousedown.DT', function () { return false; } ) .bind( 'selectstart.DT', function () { return false; } ); /* ID the first elements only */ if ( oSettings.sTableId !== '' && typeof oSettings.aanFeatures.p == "undefined" ) { nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' ); nFirst.setAttribute( 'id', oSettings.sTableId+'_first' ); nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' ); nNext.setAttribute( 'id', oSettings.sTableId+'_next' ); nLast.setAttribute( 'id', oSettings.sTableId+'_last' ); } }, "fnUpdate": function ( oSettings, fnCallbackDraw ) { if ( !oSettings.aanFeatures.p ) { return; } var iPageCount = $.fn.dataTableExt.oPagination.iFullNumbersShowPages; var iPageCountHalf = Math.floor(iPageCount / 2); var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength); var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; var sList = ""; var iStartButton, iEndButton, i, iLen; var oClasses = oSettings.oClasses; /* Pages calculation */ if (iPages < iPageCount) { iStartButton = 1; iEndButton = iPages; } else { if (iCurrentPage <= iPageCountHalf) { iStartButton = 1; iEndButton = iPageCount; } else { if (iCurrentPage >= (iPages - iPageCountHalf)) { iStartButton = iPages - iPageCount + 1; iEndButton = iPages; } else { iStartButton = iCurrentPage - Math.ceil(iPageCount / 2) + 1; iEndButton = iStartButton + iPageCount - 1; } } } /* Build the dynamic list */ for ( i=iStartButton ; i<=iEndButton ; i++ ) { if ( iCurrentPage != i ) { sList += '<a class="'+oClasses.sPageButton+'">'+i+'</a>'; } else { sList += '<a class="'+oClasses.sPageButtonActive+'">'+i+'</a>'; } } /* Loop over each instance of the pager */ var an = oSettings.aanFeatures.p; var anButtons, anStatic, nPaginateList; var fnClick = function(e) { /* Use the information in the element to jump to the required page */ var iTarget = (this.innerHTML * 1) - 1; oSettings._iDisplayStart = iTarget * oSettings._iDisplayLength; fnCallbackDraw( oSettings ); e.preventDefault(); }; var fnFalse = function () { return false; }; for ( i=0, iLen=an.length ; i<iLen ; i++ ) { if ( an[i].childNodes.length === 0 ) { continue; } /* Build up the dynamic list forst - html and listeners */ var qjPaginateList = $('span:eq(0)', an[i]); qjPaginateList.html( sList ); $('a', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse ) .bind( 'selectstart.DT', fnFalse ); /* Update the 'premanent botton's classes */ anButtons = an[i].getElementsByTagName('a'); anStatic = [ anButtons[0], anButtons[1], anButtons[anButtons.length-2], anButtons[anButtons.length-1] ]; $(anStatic).removeClass( oClasses.sPageButton+" "+oClasses.sPageButtonActive+" "+oClasses.sPageButtonStaticDisabled ); if ( iCurrentPage == 1 ) { anStatic[0].className += " "+oClasses.sPageButtonStaticDisabled; anStatic[1].className += " "+oClasses.sPageButtonStaticDisabled; } else { anStatic[0].className += " "+oClasses.sPageButton; anStatic[1].className += " "+oClasses.sPageButton; } if ( iPages === 0 || iCurrentPage == iPages || oSettings._iDisplayLength == -1 ) { anStatic[2].className += " "+oClasses.sPageButtonStaticDisabled; anStatic[3].className += " "+oClasses.sPageButtonStaticDisabled; } else { anStatic[2].className += " "+oClasses.sPageButton; anStatic[3].className += " "+oClasses.sPageButton; } } } }; /* Example initialisation */ $(document).ready(function() { $('#example').dataTable( { "sPaginationType": "links" } ); } ); </script>
et j'ai mis un class="example" sur mon <FORM> (pas sûr de tout que c'est la ce que je dois mettre)
Merci encore

Re: Affichage sur plusieures pages

par moogli » 28 févr. 2012, 11:19

Juste une question ça se passe comment si JS n'est pas activé ?

ça se fait facilement en php => http://www.lephpfacile.com/howto/6-comm ... age-en-php

@+

Re: Affichage sur plusieures pages

par Thibaud C » 28 févr. 2012, 10:40

Peux tu me montrer le code ou tu as tenter de l'inserer :) ?

Re: Affichage sur plusieures pages

par ruca » 28 févr. 2012, 09:48

Coucou,
Alors j'ai été sur le site que tu m'a gentillement indiqué et la....je nage :)
J'ai essayé d'appliquer ceci http://datatables.net/plug-ins/pagination mais sans succès je sais pas ce que je fais de faux.
Peut-tu m’éclairer si cela ne te dérange pas?
Mille mercis et à tantôt.

Re: Affichage sur plusieures pages

par ruca » 27 févr. 2012, 16:50

Hey salut Thibaud C encore toi? Merci!
C'est une base de donnée qui va contenir plus de 20'000 enregistrements, je te fait une explication généraliste:
C'est une base de données ou un admin auras accès à tous les clients (environs 20'000) mais les triera (il y a une recherche) par rapport à des critères qu'il choisira,
l'affichage sera d'environs 300 à 400 clients ce qui pour l'instant fait défiler la page.
Pour faciliter une affichage par pagination serait plus simple.
J'ai trouvé des exemples assez simples en php et javascript mais ils ne fonctionnent pas (ou je m'y suis mal mis) et vu que tu m'as aidé avec un exemple assez simple que
j'ai pu mettre en ouvre facilement pour cacher certaines colonnes je me suis dis que cela existait en javascript ou Jquery (si tu préferes).
Je jette un œil à ton exemple histoire de comprendre un peu les options.
Merci

Re: Affichage sur plusieures pages

par Thibaud C » 27 févr. 2012, 16:31

Il y a de supers puissants tableur en jquery recherche+pagination+ trie sur colonne etc...
Par contre il ne faut pas des millions d'enregistrement, car sinon ça va être vraiment trop lourd a charger ( 100 ca passe ).

http://datatables.net/

Si tu ne comprends pas les exemples, dis le, je t'expliquerais ;)

Affichage sur plusieures pages

par ruca » 27 févr. 2012, 16:25

Bonjour à tous et merci à ceux qu'essayeront de m'aider.
Voilou, j'ai une requête php/mysql qui peut me retourner jusqu’à quelques centaines de résultats que j'affiche dans un tableau.
J'aimerais étaler cet affichage sur plusieures pages, genre 30 enregistrements par page.
J'ai essayé plusieures méthodes trouvés sur le net mais aucune n'a fonctionné.
Est-ce que vous avez un exemple ou un début d'idée de comment je peut faire cela?
Mon niveau au javascript est "very newb".
Merci et à plus tard.