Pagination javascript php mysql

Soyez le premier à donner votre avis sur cette source.

Vue 12 892 fois - Téléchargée 1 803 fois

Description

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 / Exemple :


<?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.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

spipod
Messages postés
23
Date d'inscription
mercredi 2 février 2005
Statut
Membre
Dernière intervention
17 juillet 2009
-
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.
cs_stay
Messages postés
496
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2 -
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.
spipod
Messages postés
23
Date d'inscription
mercredi 2 février 2005
Statut
Membre
Dernière intervention
17 juillet 2009
-
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.
cs_stay
Messages postés
496
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2 -
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é.
cod57
Messages postés
1660
Date d'inscription
dimanche 7 septembre 2008
Statut
Membre
Dernière intervention
11 septembre 2013
8 -
@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 !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.