CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 27 19:33:51

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

PAGINATION JAVASCRIPT PHP MYSQL

Information sur la source

Note :

10,00 / 10

Catégorie :Astuces Classé sous :pagination, php, javascript, mysql, tableau Niveau :Débutant Date de création :05/07/2011 Vu / téléchargé :5 407 / 661

Auteur : cod57

Ecrire un message privé

Commentaire sur cette source (12)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

bonjour

Un script qui s'adresse aux débutants qui veulent une pagination facile. Mélange deux deux méthodes facilement accessibles.

Tout est dans le zip, il faut mettre la table sur votre serveur mysql et configurer le haut du fichier php comme d'habitude host + user + pass ... + la base ...

a++

Source

<?php
mysql_connect('localhost','root','');
mysql_select_db('a');
$sql="select * from mytable";
$q=mysql_query($sql);
$show='';
while($r=mysql_fetch_array($q)){
// id nom prenom telephone email adresse ville codepostal region pays date commentaire
$show .= '<tr><td>'.$r['nom'].' - '.$r['prenom'].' - '.$r['telephone'].'</td><td><a href="pagedetail.php?id='.$r['id'].'">'.$r['id'].'</a></td><td>'.$r['email'].'</td></tr>';
}
?>
<html>
<head>
<title>HTML Table Paging Example</title>
<script type="text/javascript">
var employees;
var tbody;
var rows;
var rowCount = 0;
var pageSize = 10;
var pageIndex = 0;
var pages = 0;
function init(){
employees = document.getElementById("employees");
tbody = employees.getElementsByTagName("tbody")[0];
rows = tbody.getElementsByTagName("tr");
rowCount = rows.length;
pages = Math.ceil(rowCount / pageSize);
for ( var i=1; i <= pages; i++){
var paging = document.getElementById("paging");
paging.innerHTML += "<span onclick='selectPage(" + i + ");'>" + i + "</span>";
}
}
function selectPage(pageIndex){
var current = (pageSize * (pageIndex - 1));
var next = current + pageSize;
for (var idx =0; idx < current; idx++){
rows[idx].style.display ='none';
}
for (var idx = current; idx < next; idx++){
rows[idx].style.display = 'table-row';
}
for (var idx = next; idx < rowCount; idx++){
rows[idx].style.display ='none';
}
}
</script>
<style>
table { border-collapse:collapse; border:1px solid #999; width:90%; }
th, td { border:1px solid #999; padding:3px; }
tfoot td span { border:1px solid #888; padding:3px; cursor:pointer; display:inline-block; margin-right:1px; }
</style>
</head>
<body>
<table id="employees">
<thead>
<tr>
<th>Prénom - Nom - Téléphone</th>
<th>Détals</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php echo $show;?>
</tbody>
<tfoot>
<tr>
<td colspan="3" id="paging">
</td>
</tr>
</table>
<script type="text/javascript">
init();
selectPage(1);
</script>
</body>
</html>

<?php
mysql_connect('localhost','root','');
mysql_select_db('a');
$sql="select * from mytable";
$q=mysql_query($sql);
$show='';
while($r=mysql_fetch_array($q)){
// id  nom  prenom  telephone  email  adresse  ville  codepostal  region  pays  date  commentaire  
$show .= '<tr><td>'.$r['nom'].' - '.$r['prenom'].' - '.$r['telephone'].'</td><td><a href="pagedetail.php?id='.$r['id'].'">'.$r['id'].'</a></td><td>'.$r['email'].'</td></tr>';
}
?>
<html>
        <head>
                <title>HTML Table Paging Example</title>
                <script type="text/javascript">
                        var employees;
                        var tbody;
                        var rows;
                        var rowCount = 0;
                        var pageSize = 10;
                        var pageIndex = 0;
                        var pages = 0;
                        
                        function init(){
                                employees = document.getElementById("employees");
                                tbody = employees.getElementsByTagName("tbody")[0];
                                rows = tbody.getElementsByTagName("tr");
                                rowCount = rows.length;
                                pages = Math.ceil(rowCount / pageSize);
                                
                                for ( var i=1; i <= pages; i++){
                                        var paging = document.getElementById("paging");
                                        paging.innerHTML += "<span onclick='selectPage(" + i + ");'>" + i + "</span>";
                                }
                        }
                        
                        function selectPage(pageIndex){
                                var current = (pageSize * (pageIndex - 1));
                                var next = current + pageSize;
                                
                                for (var idx =0; idx < current; idx++){
                                        rows[idx].style.display ='none';
                                }
                                
                                
                                for (var idx = current; idx < next; idx++){
                                        rows[idx].style.display = 'table-row';
                                }
                                
                                
                                for (var idx = next; idx < rowCount; idx++){
                                        rows[idx].style.display ='none';
                                }
                        }
                </script>
                <style>
                        table { border-collapse:collapse; border:1px solid #999; width:90%; }
                        th, td { border:1px solid #999; padding:3px; }
                        tfoot td span { border:1px solid #888; padding:3px; cursor:pointer; display:inline-block; margin-right:1px; }
                </style>
        </head>
        <body>
                <table id="employees">
                        <thead>
                                <tr>
                                        <th>Prénom - Nom - Téléphone</th>
                                        <th>Détals</th>
                                        <th>Email</th>
                                </tr>
                        </thead>
                        <tbody>
                               <?php echo $show;?>
                        </tbody>
                        <tfoot>
                                <tr>
                                        <td colspan="3" id="paging">
                                        </td>
                                </tr>
                </table>
                <script type="text/javascript">
                        init();
                        selectPage(1);
                </script>               
        </body>
</html>

Conclusion

Ce script n'intéressera pas les développeurs avancés mais peu dépanner des débutants.

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

dump.sql 22 585 octets
index.php 4 004 octets
pagination.jpg 219 720 octets

Télécharger le zip

Sources du même auteur

GENERATEUR DE BOUTONS DE PARTAGES POUR RESEAUX SOCIAUX

FORM TO MAIL AVEC PROTECTION PAR TOKEN ET CAPTCHA CONTRÔLES ...

MOTEUR DE RECHERCHE SUR BASE MYSQL FULLTEXT ET BOOLEAN AVEC ...

GESTIONNAIRE DE NEWS BASIQUE AVEC UPLOAD D'IMAGES

GESTIONNAIRE D'ELEVES OU CARNET D'ADRESSE AVEC EXPORT XLS

Toutes les sources de cod57

Sources de la même categorie

AFFICHÉ SUR UN TABLEAU AVEC PAGINATION ET BASE DE DONNÉES par stormxp

GENERATEUR D'ONGLET DE NAVIGATION PHP par pos123

FORMATER UN LIEN YOUTUBE, DAILYMOTION OU VIMEO POUR L'UTILIS... par kgb93

PAGINATION + FICHIER CSS par profdi

SYSTEME D'AUTHENTIFICATION PHP AVEC PROTÉCTION KEYLOGGER par mtrix000

Toutes les sources de la catégorie Astuces

Sources en rapport avec celle ci

SYSTÈME DE PAGINATION AVEC BDD ET IMAGES (FICHIERS) par begueradj

TRANSFORMER UN TABLEAU PHP EN TABLEAU JAVASCRIPT par J_G

UN PETIT CALENDRIER SYMPA PHP/JAVASCRIPT/MYSQL par lamine11

APPLICATION E-COMMERCE par lassadf

RECUPERATION DU RESULTAT D'UNE REQUETE MYSQL DANS UN TABLEAU... par Rivenbis

Commentaires et avis

Commentaire de spipod le 06/07/2011 10:33:29 10/10

Bon code source d'exemple pour débutant.

Perso, j'aurai imposé le style display none par défaut (par style ou class) sur chaque ligne de tableau, puis utilisez un var 'page_actuelle' pour ne pas modifier chaque ligne de tableau dans la fonction selectPage : display_none sur page_actuelle, puis display table-row sur la page demandée.

Cela juste pour aller un peu plus vite dans la pagination.

Mais ... cela ne change rien à mon appréciation.

Commentaire de stay le 06/07/2011 10:43:44

Bonjour cod57,

Tu montres bien, ta maitrise en JavaScript.
Mais, imaginons que dans cette même table, il y aurait 150000 membres.
Cela veut dire que tu vas récupérer la totalité des membres pour ensuite les parsers en JavaScript.
Je crois qu'on peut optimiser cela si l'on modifie ta requête SQL.
Tu as indexé correctement le champ id, parfait.
Je déconseille à tout le monde d'utiliser la clause LIMIT (souvent utilisé pour la pagination sur les forums), car elle ne se préoccupe pas de l'indexation.
Un BETWEEN sur le champ indexer serait plus judicieux.
Mais, il y a aussi un inconvénient.
Si un enregistrement est supprimer entre, exemple : BETWEEN 80 AND 100, 19 enregistrement sera retourné et non 20.

Voici le résultat après un EXPLAIN sur cette requête :
EXPLAIN SELECT * FROM `mytable` WHERE id BETWEEN 10 AND 20

id select_type table     type possible_keys key      key_len ref rows Extra
-------------------------------------------------------------------------------------------------------------------
1 SIMPLE         mytable     range PRIMARY PRIMARY      3         NULL 11 Using where

Voici le résultat après un EXPLAIN sur ces deux requetes :
EXPLAIN SELECT * FROM `mytable` ou EXPLAIN SELECT * FROM `mytable` LIMIT 10,20

id select_type table      type possible_keys key      key_len ref rows Extra
-------------------------------------------------------------------------------------------------------------
1 SIMPLE         mytable      ALL NULL         NULL      NULL NULL 100

--------------
Donc, tu peux constater que la totalité de la table n'a pas été parcouru avec l'indexation.

Bien sûr, tu devras faire une modification par la suite dans le JavaScript pour la pagination et tu ne devras plus parsers tous les enregistrements.

Commentaire de spipod le 06/07/2011 11:04:17

Bonjour Stay,

Je crois que tu t'égares un peu, le but de ce code permet d'éviter les ré-actualisations HTML d'une façon très simple pour ne pas solliciter le serveur PHP pour de la pagination.

Le débutant avec sa petite table d'une centaine d'enregistrement y trouvera son compte.

Cela dit, ta remarque peut être utile pour quelques lecteurs qui recherche plus d'actualisation entre utilisateurs, puisque dans ton exemple, les insertions dans la table seront pris en compte, alors que dans le source cité, les nouveaux enregistrements d'un autre utilisateur ne seront pas visible sans le F5.

Commentaire de stay le 06/07/2011 11:16:34

Tu as certainement raison.
Mais pour moi, petite table ou grande table, c'est du pareil au même.
La réactualisation du code html restera toujours aussi simple.
Un petit peu d'Ajax devra être utilisé.

Commentaire de cod57 le 06/07/2011 14:04:31

@spipod complétement d'accord avec toi ! En effet c'est pour des projets limités à quelques centaines de lignes, des commentaires ou une categorie dans un petit site d'annonces. Merci pour ta note !

Commentaire de stay le 07/07/2011 16:00:04

Très bien, comme cela, nous avons plusieurs points de vue, pour aider les débutants à choisir la bonne méthode.
En suite @cod57, tu aurais pu préciser au départ à quel projet était destiné ce code.
Le problème chez un débutant, c'est que ce code aurait pu servir pour tous types de projets.
Donc, merci pour moi également.
--------------
Attention, sur certains sites web sur lesquels j'ai bossé, l'optimisation du code était lié aux travail mal pensé au départ.
Cela évite des frais supplémentaires aux clients et aucune justification.
--------------
PS : ne partez jamais sur un code facile ou sur une idée fondée chez un débutant.
Car, c'est une perte de temps.
Pour moi la meilleur méthode d'apprendre la syntaxe ou la logique d'un langage, c'est de passé par un livre.
Je crois que ce forum était destiné à l'optimisation du code et pas "voici du code et fait en ce que tu veux".
Il y a des tutoriels sur le web pour ça !

Commentaire de cod57 le 07/07/2011 16:42:02

bonjour

@stay en effet pour plus de sécurité vu que desfois les débutants font des copier coller bête et méchant il faudrait limiter le nombre de retour donc comme tu le préconises la requête sql devrait être raisonable
$sql="select * from mytable limit 200"; par exemple

a++

Commentaire de stay le 09/07/2011 10:32:15

Exactement, mais ton exemple n'est pas bon.

Dans mon premier post, j'explique que le LIMIT ne récupère aucuns champs indexés sur la table.
Donc, le LIMIT parcourt toute la table.
Tu pourras constater qu'avec le BETWEEN, la totalité de la table n'a pas été parcourue avec l'indexation.

Pour comprendre ce qu'il en retourne, l'optimisation d'une requête SQL ce vérifie avec un EXLAIN.
http://dev.mysql.com/doc/refman/5.0/fr/explain.html

Commentaire de begueradj le 11/07/2011 13:45:30

Merci pour vos remarques, STAY

Commentaire de masternico le 12/07/2011 18:56:27

Petit commentaire qui j'espère sera constructif:
PHP est très mauvais comme itérateur. Pour un traitement de +eurs milliers de références, une page pourrait demander beaucoup de temps à s'afficher alors que la requette n'aura demandé que quelques millième de secondes.

Une méthode que j'ai commencé à implémenter et qui demande encore de l'amélioration, c'est d'utiliser mysql pour construire le tableau. Ce qui fait qu'au lieu de faire ceci:
4.$sql="select * from mytable";
5.$q=mysql_query($sql);
6.$show='';
7.while($r=mysql_fetch_array($q)){
8.// id nom prenom telephone email adresse ville codepostal region pays date commentaire
9.$show .= '<tr><td>'.$r['nom'].' - '.$r['prenom'].' - '.$r['telephone'].'</td><td><a href="pagedetail.php?id='.$r['id'].'">'.$r['id'].'</a></td><td>'.$r['email'].'</td></tr>';
10.}

On a ceci:

4.$sql="select concat("<tr><td>",`nom`," - ",`prenom`," - ",`telephone`,"</td><td><a href=\"pagedetail.php?id=",CAST(`id` as char),"</td><td>",`email`,"</td></tr>") as show from mytable";
5.$q=mysql_query($sql);
6.$show='';
7.while($r=mysql_fetch_array($q)){
8.// id nom prenom telephone email adresse ville codepostal region pays date commentaire
9.$show .= $r['show';
10.}

Ce qui ne semble pas changer grand chose mais qui en fait permet un gain de performance considérable sur de grands résultats

Voila, c'est tout

Commentaire de stay le 13/07/2011 10:57:51

Bonjour @masternico,

Tu as certainement raison.
Je n'ai pas pris le temps de tester l'exemple que tu proposes mais, cette méthode sera très complexe à gérer si il y a des divergences par enregistrement (user).
Je parle de l'HTML qui pourrais être +/- conséquent par enregistrement.

Exemple:
--------
Dans un backoffice, je pourrais avoir une liste avec certaine personne qui serait RO (uniquement en lecture) ou RW (lecture et éditable).
Donc, si l'utilisateur à un statut éditable, dans la liste, il y aura un lien "éditer".

Ta méthode serait trop complexe à gérer.
De plus, c'est régresser dans la méthode de coder.
Pour ma part, séparé les langages pour une meilleur gestion est conseillé.

Commentaire de masternico le 13/07/2011 17:23:57

>>STAY : yep, assez d'accord sur l'aspect régression de l'exemple donné.
J'ai juste modifié le source donné pour que l'on voit comme quoi l'idée est simple. Mais ce n'est pas l'aboutissement auquel je suis arrivé. c'est juste l'avant goût, l'idée d'où je suis parti car je continue à creuser puisqu'au niveau des chronos, il n'y a pas photo.

Actuellement, je suis plutôt sur un modèle CMS avec gestion des affichages de tables directement stockés dans la BDD. La requette passe par une procédure stockée qui à partir d'un résultat et d'un gabari nous ressort une table toute construite avec, s'il le faut, des liens dynamiques pour éditer un profil si le statut est éditable (pour reprendre ton exemple). Du coup avec la procédure stockée, celà rentre dans tes principes de séparation des languages.
Le plus compliqué étant de mettre en place un gabari modulable par backoffice.

Voilà, peut-être un jour je publierai mon source si j'aboutis à quelque chose de convainquant.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

tableau php à partir de mysql [ par nissarte ] Salut à tousG cherché mais g rien trouvé...M'en voulez pas, je débute en php & mysql...Voila, je souhaite charger toutes les données d'un champ d'une pagination sur une page php [ par hbib ] salut,je souhaiterai savoir comment faire pour faire une pagination sur une page phpen effet jai un tableau qui affiche differente infos de ma base de Tableau Php vers Javascript. [ par braingnac ] Pourrais-t-on me dire comment utiliser un tableau à deux dimensions ,créé en php, dans une fonction javascript.Voici le code :print "<script>fun php-javascript [ par kipetchi ] Bonjour,Un petit pb de variable:Je remplis un tableau avec des images contenues d'un repertoire en php:while($file = readdir($dir)) { $tab[$i] = $f Tableau avec php et données mysql [ par Alpha911 ] Bonjour,j'essais de faire un tableau dont les lignes s'ajustent en fonction du nombre de données exemple l'utilisateur 9 a effectué 4 emprun Remplir un tableau javascript avec du php [ par adakick ] Bonjour...Je voudrais remplir un tableau javasript avec les valeures d'un tableau en php.MErci    clic sur un tableau d'images lues à partie de mysql/php [ par amewole ] Voici mon problème : Je suis debutant php j'extrais des données images d' une table mysql et je mets ces données images dans un tableau tableau php vers tableau javascript [ par chamallow ] Bonjour,Ca fait plusieurs jours que je suis sur un problème et je n'arrive pas à le résoudre.En fait, il s'agit d'une fenêtre popup, où on retrouve un Utilisation des variables javascript dans php [ par bekir_net ] Salutj'ai besoin d'utiliser des variable javascript dans du php sacahnt que j'utilise le php dans le javascript; le code suivant explique le probeleme Tableau Mysql en php [ par rems02 ] Bonjour,Je m'adresse à vous car j'ai besoins d'un avis des expert:j'ai une table mysql de typeid | photo | lien_photoet je voudrais afficher toutes le

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : REMPLIR UN TABLEAU à PARTIR DE LA FIN par Jeromedu79

RE : MYSQL_FETCH_ASSOC par moumenxavi

RE : MYSQL_FETCH_ASSOC par inwebo

RE : REMPLIR UN TABLEAU à PARTIR DE LA FIN par inwebo

RE : CHANGER LE CONTENU D'UNE PAGE WEB EN PHP EN CLIQUAN SUR UN BOUTON (J'AI BESOIN D'AIDE) par inwebo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP