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.
la communauté d'entraide francophone dédiée au PHP
Affichage sur plusieures pages
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
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
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
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
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.
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.
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
@+
ça se fait facilement en php => http://www.lephpfacile.com/howto/6-comm ... age-en-php
@+
Il en faut peu pour être heureux ......
Coucou,
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
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>
Merci encore
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...
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...
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 ^^)
@+
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 ^^)
@+
Il en faut peu pour être heureux ......