Pagination javascript php mysql

Soyez le premier à donner votre avis sur cette source.

Vue 13 880 fois - Téléchargée 1 869 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

Bonjour,

Script 2011..nous sommes en 2013..:)

Je suis un débutant et j'aimerai utiliser ce script avec les pages de détail. Seulement, je ne sais comment faire. Un peu d'orientation? Merci..
Messages postés
487
Date d'inscription
dimanche 5 octobre 2003
Statut
Membre
Dernière intervention
1 septembre 2011

>>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.
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
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é.
Messages postés
487
Date d'inscription
dimanche 5 octobre 2003
Statut
Membre
Dernière intervention
1 septembre 2011

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>["pagedetail.php?id='.$r['id'].' '.$r['id'].']</td><td>'.$r['email'].'</td></tr>';
10.}


On a ceci:

4.$sql="select concat("<tr><td>",`nom`," - ",`prenom`," - ",`telephone`,"</td><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
Messages postés
273
Date d'inscription
dimanche 4 octobre 2009
Statut
Membre
Dernière intervention
24 juin 2014
4
Merci pour vos remarques, STAY
Afficher les 13 commentaires

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.