IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Tri dans un tableau avec javascript


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2014
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Février 2014
    Messages : 43
    Points : 40
    Points
    40
    Par défaut Tri dans un tableau avec javascript
    Bonjour tout le monde, je viens vers vous pour m'aider a s'en sortir

    en faite je dois faire des tri dans une base de données, actuellement j'affiche les données de ma base de donné avec une requete sql dans un tableau, le problème et que le tableau est très grand vu la quantité d'enregistrement dans la bdd (environ 300 mille enregistrement) en plus les données ne sont pas facilement exploitable vu la quantité affiché d'un seul coup.

    Mon tuteur de stage me demande de faire un tri sur les résultats affiché, par exemple tri avec "Numero" et tri avec "Type" et tri avec "mois"

    une parmi les propositions que je l'ai eu c'est que quand je clic sur le nom de la colonne ça refait une requete sql avec un order by nomdelacolone

    je sais pas faire ça en javascript, avez vous une solution ou une piste pour faire cela !!!!! voici un aperçu du tableau que je souhaite le faire le tri ainsi que le code qui m'a permis d'affiché le tableau

    merci d'avance
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    <?php
    // connexion bdd
    try
    {
        $bdd = mysqli_connect('localhost', 'root', '06193475L', 'base-pacetel');
        $bdd->set_charset("utf8");
     
    }
    catch (Exception $e)
    {
        die('Erreur : ' . $e->getMessage());
    }
     
    if(isset($_POST['liste1'])){
        //si la liste a été "postée" c ad choix fait
        $liste1=$_POST['liste1'];
    }else{
        $liste1=-1;
    }
    ?>
     
     
    S&eacute;lectionnez un client :
    <form name="form1" method="post" action="index.php">
    <select name="liste1" onchange=" form1.submit();">
        <option value=-1>-- Choisissez -- </option>
        <option>Lumelec</option><!--* il faut cette ligne pour avoir obliagtoirement un changement -->
        <option>client2</option>
        <option>client3</option>
        <option>client4</option>
        <option>client5</option>
     
     
    <?php
    $requete = "SELECT nomclient FROM facture2015";
    $execution_requete = mysql_query($requete);
    while($total = mysql_fetch_array($execution_requete))
     
    //Liste déroulante client
     
    {
    echo "<option value=\"".$total["nomclient"]."\"";
    if($liste1==$total['nomclient']) { echo "selected"; }//ça c'est pour garder la selection lors du réaffichage
    echo ">".$total['nomclient']."</option>\n";
    }
    $requete1 = "SELECT mois FROM facture2015";
    $execution_requete1 = mysql_query($requete1);
    while($total1 = mysql_fetch_array($execution_requete1))
     
    //Liste déroulante client
     
    {
    echo "<option value=\"".$total1["Type"]."\"";
    if($liste2==$total1['Type']) { echo "selected"; }//ça c'est pour garder la selection lors du réaffichage
    echo ">".$total1['Type']."</option>\n";
    }
    ?>
    </select>
    </form>
    <?php
     
    if($liste1 != -1){ //si on a fait un choix
        //on refait une requette avec une condition
        $escaped_liste1 = mysql_real_escape_string($liste1);
     
        $req = "SELECT DISTINCT nomclient,Numero,Destination,value,valeur,StartValue,coutCDR,Type,mois FROM `facture2015` WHERE `nomclient` ='".$escaped_liste1."'";
        $res = mysqli_query($bdd,$req);
     
        // on va scanner tous les tuples un par un
    echo "&nbsp"."<th>entreprise</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>Numero</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>Destination</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>value</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>valeur</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>StartValue</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>coutCDR</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>Type</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>mois</th>" ;
     
    echo "<table>";
    while ($data = mysqli_fetch_array($res)) {
        // on affiche les résultats
     
        echo "<tr><td>".$data['nomclient']."</td><td>".$data['Numero']."</td><td>".$data['Destination']."</td><td>".$data['value']."</td><td>".$data['valeur']."</td><td>".$data['StartValue']."</td><td>".$data['coutCDR']."</td><td>".$data['Type']."</td><td>".$data['mois']."</td></tr>";
    }
     
    echo "</table>";
        *//or die('erreur affichage');
     
     
     
    }
     
    ?>
    </form>
    </div>
     
     
     
    </body>
    <html>
    Nom : apercu.png
Affichages : 1491
Taille : 75,8 Ko

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    il suffit de recupérer la collection des tr du tableau et de lui appliquer un fonction de tri perso basée sue le contenu de la colonne à trier .

    un petit exemple avec JQuery:
    Un click sur la colonne trie selon le contenu des td de la colonne
    https://fiddle.jshell.net/z228ab9z/

  3. #3
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2014
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Février 2014
    Messages : 43
    Points : 40
    Points
    40
    Par défaut
    MERCI @SpaceForge
    j'ai suivie votre conseil et voila ce que j'ai fait :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
     
    <title>Recherche</title>
    <style>
     
    body{background-color: #1dcfd1;
    margin: 20px;}
    table {
     border-width:1px; 
     border-style:solid; 
     border-color:black;
     width:90%;
     border-collapse: collapse;
     }
     a{margin-left:80%;}
     
    td { 
     border-width:1px;
     border-style:solid; 
     border-color:black;
     width:15%;
     text-align: center;
     }
     
     
    </style>
     
    </head>
    <body>
    <script>
    // execute la fonction quand je clic
    function myFunction() {
        document.getElementById("orderby").click(); // Clic 
    }
    </script>
     
     
    <a href="consommation.php">Détails de consommation</a>
    <div class="gauche">
    <!-- recherche par nom -->
    <form action ="cherche.php" method="post">
    	<span>Recherche par nom :</span> 
    	<input type="text" id="search" name="search"/>
    	<input type="submit" value="Appliquer">
    	<input type="reset" value="Reset">
    </form>
    <!-- recherche par Numero -->
    <form action ="cherche.php" method="post">
    	<span>recherche numero client :</span> 
    	<input type="text" id="numero" name="numero"/>
    	<input type="submit" value="Appliquer">
    	<input type="reset" value="Reet">
    </form>
    <!-- obtenir toute les informations d'un client -->
    <?php
    // connexion bdd
    try
    {
        $bdd = mysqli_connect('localhost', 'root', '06193475L', 'base-pacetel');
            $bdd->set_charset("utf8");
            
    }
    catch (Exception $e)
    {
        die('Erreur : ' . $e->getMessage());
    }  
     
    if(isset($_POST['liste1'])){
            //si la liste a été "postée" c ad choix fait
            $liste1=$_POST['liste1'];
    }else{
            $liste1=-1;
    }
    ?>
     
     
    S&eacute;lectionnez un client :
    <form name="form1" method="post" action="index.php">
    <select name="liste1" onchange=" form1.submit();">
    	<option value=-1>-- Choisissez -- </option> 
    	<option>Lumelec</option><!--  il faut cette ligne pour avoir obliagtoirement un changement -->
    	<option>cleint2</option>
    	<option>client3</option>
    	<option>client4</option>
     
     
    	<option>client100</option>
     
     
     
     
     
     
     
    <?php
    //traitement du filtre
    if(isset($_GET['orderby'])) {
        $req = "SELECT DISTINCT nomclient,Numero,Destination,value,valeur,coutCDR,Type,mois FROM `facture2015` WHERE `nomclient` ='".$escaped_liste1."' ORDER BY ".$_GET['orderby'];
    } else {
        $req = "SELECT DISTINCT nomclient,Numero,Destination,value,valeur,coutCDR,Type,mois FROM `facture2015` WHERE `nomclient` ='".$escaped_liste1."'";
    }
    $res = mysqli_query($bdd,$req);
     
    $requete = "SELECT nomclient FROM facture2015";
    $execution_requete = mysql_query($requete);
    while($total = mysql_fetch_array($execution_requete))
     
    //Liste déroulante client
     
    {
    echo "<option value=\"".$total["nomclient"]."\"";
    if($liste1==$total['nomclient']) { echo "selected"; }//ça c'est pour garder la selection lors du réaffichage 
    echo ">".$total['nomclient']."</option>\n";
    }
     
    ?>
     
    </select>
    </form>
    <?php
     
    if($liste1 != -1){ //si on a fait un choix
            //on refait une requette avec une condition
            $escaped_liste1 = mysql_real_escape_string($liste1);
            
            $req = "SELECT DISTINCT nomclient,Numero,Destination,value,valeur,coutCDR,Type,mois FROM `facture2015` WHERE `nomclient` ='".$escaped_liste1."' ORDER BY coutCDR DESC  LIMIT 0, 100 ";
            $res = mysqli_query($bdd,$req);
            
            // on va scanner tous les tuples un par un
    echo "<th><a id=\"orderby\" onclick=\"window.location.href = window.location.href + '?orderby=entreprise'\">entreprise</a></th>
    <th><a id=\"orderby\" onclick=\"window.location.href = window.location.href + '?orderby=Numero'\">Numero</a></th>
    <th><a id=\"orderby\" onclick=\"window.location.href = window.location.href + '?orderby=Destination'\">Destination</a></th>
    <th><a id=\"orderby\" onclick=\"window.location.href = window.location.href + '?orderby=value'\">value</a></th>
    <th><a id=\"orderby\" onclick=\"window.location.href = window.location.href + '?orderby=valeur'\">valeur</a></th>
    <th><a id=\"orderby\" onclick=\"window.location.href = window.location.href + '?orderby=coutCDR'\">coutCDR</a></th>
    <th><a id=\"orderby\" onclick=\"window.location.href = window.location.href + '?orderby=Type'\">Type</a></th>
    <th><a id=\"orderby\" onclick=\"window.location.href = window.location.href + '?orderby=mois'\">mois</a></th>" ;
            
    echo "<table>";
    while ($data = mysqli_fetch_array($res)) {
            // on affiche les résultats
            
            echo "<tr><td>".$data['nomclient']."</td><td>".$data['Numero']."</td><td>".$data['Destination']."</td><td>".$data['value']."</td><td>".$data['valeur']."</td><td>".$data['coutCDR']."</td><td>".$data['Type']."</td><td>".$data['mois']."</td></tr>";
    }
     
    echo "</table>";
             //or die('erreur affichage');
            
    }
     
     
    ?>	
    </form>
    </div>
     
     
     
    </body>
    <html>
    quand je clic sur une des colonne le javascript fonctionne mais le tableau disparais et j'ai pas d'autre affichage or que moi je souhaite que ca me fasse un tri
    Nom : apres.png
Affichages : 1365
Taille : 23,9 Ko

  4. #4
    Membre actif

    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2013
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2013
    Messages : 119
    Points : 203
    Points
    203
    Billets dans le blog
    1
    Par défaut
    Ta page est plus complexe que ca !
    ton Tableau ne s affiche pas car qnd tu clic sur (une colonne) pour trier tu fais une requete get et la liste (choix de ton client) ne s envoie pas
    Le tri mieux vaut le faire cote server (dans la base de donnée en ajoutant la close order by)
    il te faut de la pagination 'car pour visualiser 300m sur une seule page ca sera juste ) faudra ajouter la pagination cote server et client

    Pour le tri je t ai fait cette modification
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
     
    <?php
    // connexion bdd
    try
    {
        $bdd = mysqli_connect('localhost', 'root', '06193475L', 'base-pacetel');
        $bdd->set_charset("utf8");
     
    }
    catch (Exception $e)
    {
        die('Erreur : ' . $e->getMessage());
    }
     
    if(isset($_POST['liste1'])){
        //si la liste a été "postée" c ad choix fait
        $liste1=$_POST['liste1'];
    }else{
        $liste1=-1;
    }
    ?>
     
     
    S&eacute;lectionnez un client :
    <form name="form1" method="post" action="index.php">
    <input type="hidden" name="orderBy"  />
    <input type="hidden" name="asc" value="asc" />
     
    <select name="liste1" onchange=" form1.submit();">
        <option value=-1>-- Choisissez -- </option>
        <option>Lumelec</option><!--* il faut cette ligne pour avoir obliagtoirement un changement -->
        <option>client2</option>
        <option>client3</option>
        <option>client4</option>
        <option>client5</option>
     
     
    <?php
    $requete = "SELECT nomclient FROM facture2015";
    $execution_requete = mysql_query($requete);
    while($total = mysql_fetch_array($execution_requete))
     
    //Liste déroulante client
     
    {
    echo "<option value=\"".$total["nomclient"]."\"";
    if($liste1==$total['nomclient']) { echo "selected"; }//ça c'est pour garder la selection lors du réaffichage
    echo ">".$total['nomclient']."</option>\n";
    }
    $requete1 = "SELECT mois FROM facture2015";
    $execution_requete1 = mysql_query($requete1);
    while($total1 = mysql_fetch_array($execution_requete1))
     
    //Liste déroulante client
     
    {
    echo "<option value=\"".$total1["Type"]."\"";
    if($liste2==$total1['Type']) { echo "selected"; }//ça c'est pour garder la selection lors du réaffichage
    echo ">".$total1['Type']."</option>\n";
    }
    ?>
    </select>
     
    <?php
     
    if($liste1 != -1){ //si on a fait un choix
        //on refait une requette avec une condition
        $escaped_liste1 = mysql_real_escape_string($liste1);
            $escaped_oderBy="entreprise";
            $escaped_asc="asc";
            if(isset($_POST['orderby'])){
         $escaped_oderBy = mysql_real_escape_string($_POST['orderby']);
            }
            if(isset($_POST['asc'])){
         $escaped_asc = mysql_real_escape_string($_POST['asc']);
            }
     
    $req = "SELECT DISTINCT nomclient,Numero,Destination,value,valeur,StartValue,coutCDR,Type,mois FROM `facture2015` WHERE `nomclient` ='".$escaped_liste1."' ORDER BY ".$escaped_oderBy." ".$escaped_asc." LIMIT 0, 100";
        $res = mysqli_query($bdd,$req);
     
        // on va scanner tous les tuples un par un
    echo "&nbsp"."<th><a href=\"javascript:TrierETEnvoyer('entreprise',form1)\">entreprise<a/></th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th><a href=\"javascript:TrierETEnvoyer('Numero',form1)\">Numero</a></th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>Destination</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>value</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>valeur</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>StartValue</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>coutCDR</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>Type</th>"."&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"."<th>mois</th>" ;
     
    echo "<table>";
    while ($data = mysqli_fetch_array($res)) {
        // on affiche les résultats
     
        echo "<tr><td>".$data['nomclient']."</td><td>".$data['Numero']."</td><td>".$data['Destination']."</td><td>".$data['value']."</td><td>".$data['valeur']."</td><td>".$data['StartValue']."</td><td>".$data['coutCDR']."</td><td>".$data['Type']."</td><td>".$data['mois']."</td></tr>";
    }
     
    echo "</table>";
        *//or die('erreur affichage');
     
     echo "<input type='hidden' name='orderBy' value='".$escaped_oderBy." ' />";
     echo "<input type='hidden' name='asc' value='".$escaped_asc."' />"
     
     
    }
     
    ?>
     
    </form>
    </div>
     <script>
     function TrierETEnvoyer(sortby,form){
    	 if(form.liste1.value!=-1){
    		form.orderBy.value=sortby;
    		form.asc.value=/asc/gi.test(form.asc.value)?"desc":"asc";
    	 }
    	 form.submit();
     }
     
     </script>
     
     
     
    </body>
    <html>
    j espere que ca va t aider

    et il te restera la pagination a faire

  5. #5
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2014
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Février 2014
    Messages : 43
    Points : 40
    Points
    40
    Par défaut
    merci Lakhdr
    vous avez bien compris mon besoin , je vous remercie de votre aide
    par contre j'ai pas d'idée sur la pagination coté serveur et client, si vous avez un exemple ça sera très gentil de votre part .
    je vous remercie

  6. #6
    Membre actif

    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2013
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2013
    Messages : 119
    Points : 203
    Points
    203
    Billets dans le blog
    1
    Par défaut Solution avec Data tables
    Une solution simple a mon avis c est d'utiliser data table c est un pluggin JQuery gratuit qui permet rapidement de faire une grille(table) avec toute sorte de fonctionnalités (tri, recherche, pagination ...)

    voila je te fais un exmple que tu vas certainement ameliorer et debugger si il faut pour l adapter a ta BDD

    il y aura deux page Php , la premiere index.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
     
    <?php
     session_start();
    // connexion bdd
    try
    {
        $bdd = mysqli_connect('localhost', 'root', '06193475L', 'base-pacetel');
        $bdd->set_charset("utf8");
     
    }
    catch (Exception $e)
    {
        die('Erreur : ' . $e->getMessage());
    }
     
    if(isset($_POST['liste1'])){
        //si la liste a été "postée" c ad choix fait
        $liste1=$_POST['liste1'];
            
    }else{
        $liste1=-1;
    }
    $_SESSION["liste1"]=$liste1
    ?>
     
     
     <html    >
    <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
     
     
    </head>
     
    <body>
      S&eacute;lectionnez un client :
    <form name="form1" method="post" action="index.php">
     
     
    <select name="liste1" onchange=" form1.submit();">
        <option value=-1>-- Choisissez -- </option>
        <option>Lumelec</option><!--* il faut cette ligne pour avoir obliagtoirement un changement -->
        <option>client2</option>
        <option>client3</option>
        <option>client4</option>
        <option>client5</option> 
     <?php
    $requete = "SELECT nomclient FROM facture2015";
    $execution_requete = mysql_query($requete);
    while($total = mysql_fetch_array($execution_requete))
     
    //Liste déroulante client
     
    {
    echo "<option value=\"".$total["nomclient"]."\"";
    if($liste1==$total['nomclient']) { echo "selected"; }//ça c'est pour garder la selection lors du réaffichage
    echo ">".$total['nomclient']."</option>\n";
    }
    $requete1 = "SELECT mois FROM facture2015";
    $execution_requete1 = mysql_query($requete1);
    while($total1 = mysql_fetch_array($execution_requete1))
     
    //Liste déroulante client
     
    {
    echo "<option value=\"".$total1["Type"]."\"";
    if($liste2==$total1['Type']) { echo "selected"; }//ça c'est pour garder la selection lors du réaffichage
    echo ">".$total1['Type']."</option>\n";
    }
    ?>
    </select>
    </form>
     <?php
     
    if($_SESSION["liste1"] != -1){
    ?>
     <table id="facture2015"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
            <thead>
                <tr>
                    <th>Entreprise</th>
                    <th>Numero</th>
                    <th>Destination</th>
                    <th>value</th>
                    <th>valeur</th>
                    <th>StartValue</th>
                    <th>coutCDR</th>
                    <th>Type</th>
                    <th>mois</th>
                </tr>
            </thead>
    </table>
     <script>
      $(function (){  
    	   var dataTable = $('#facture2015').DataTable( {
                "processing": true,
                "serverSide": true,
                "aProcessing": true,
    	    "aServerSide": true,
                "ajax":{
                    url :"facture2015.php", // json datasource
                    error: function(){  // error handling
                        $(".facture2015-erreur").html("");
                        $("#facture2015").append('<tbody class="facture2015-erreur"><tr><th colspan="3">Pas de données correspondantes</th></tr></tbody>');
     
     
                    }
                }
            } );
     
    });  
    </script>
     <?php
    }
     ?>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    </body>
    <html>
    ici comme tu vois il ya le lien CDN vers dataTable et jquery .
    du premier abord seul la liste des client qui va s afficher
    puis, quand on choisis un client le tableau se dessine avec filtre recherche.

    Dans le deuxieme fichier facture2015.php dansle meme niveaux que index.php du moins pour cette example

    facture2015.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
     
     <?php
     session_start();
    // connexion bdd
    try
    {
        $bdd = mysqli_connect('localhost', 'root', '06193475L', 'base-pacetel');
        $bdd->set_charset("utf8");
     
    }
    catch (Exception $e)
    {
        die('Erreur : ' . $e->getMessage());
    }
     
    if(!isset($_SESSION["liste1"]){
        //si la liste a été "postée" c ad choix fait
        $_SESSION["liste1"]=-1;
     
    } 
     
     
     
    if($_SESSION["liste1"] != -1){ / 
        $escaped_liste1 = mysql_real_escape_string($_SESSION["liste1"]);
    	 $aColumns = array( 'nomclient',
    						 'Numero',
    						 'Destination', 
    						 'value', 
    						 'StartValue',
    						 'coutCDR',
    						 'Type',
    						 'mois',
    					 );
      $sTable = "facture2015";
     $sLimit = "";
        if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
        {
            $sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
                intval( $_GET['iDisplayLength'] );
        }
     
    	$sOrder = "";
        if ( isset( $_GET['iSortCol_0'] ) )
        {
            $sOrder = "ORDER BY  ";
            for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
            {
                if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
                {
                    $sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
                        ".($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .", ";
                }
            }
     
            $sOrder = substr_replace( $sOrder, "", -2 );
            if ( $sOrder == "ORDER BY" )
            {
                $sOrder = "";
            }
        }
     
    	 $sWhere = "WHERE ( `nomclient` ='".$escaped_liste1."'";
    	 $hasSearch=false;
        if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
        {
            $hasSearch=true;
            for ( $i=0 ; $i<count($aColumns) ; $i++ )
            {
                if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
                {
                    $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
                }
            }
            $sWhere = substr_replace( $sWhere, "", -3 );
     
        }
    	$sWhere .= ')';
    	for ( $i=0 ; $i<count($aColumns) ; $i++ )
        {
            if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
            {
                if ( $hasSearch==false )
                {
                    $sWhere = "WHERE ";
                }
                else
                {
                    $sWhere .= " AND ";
                }
                $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
            }
        }
     
    	 $sQuery = "SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))." FROM   $sTable  $sWhere   $sOrder $sLimit";
    	  $rResult = mysqli_query($bdd, $sQuery ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
    	 $sQuery = "
            SELECT FOUND_ROWS()
        ";
        $rResultFilterTotal = mysqli_query($bdd, $sQuery )  or fatal_error( 'MySQL Error: ' . mysql_errno() );
        $aResultFilterTotal = mysqli_fetch_array($rResultFilterTotal);
        $iFilteredTotal = $aResultFilterTotal[0];
     
        /* Total data set length */
        $sQuery = "
            SELECT COUNT(*)
            FROM   $sTable
        ";
        $rResultTotal = mysqli_query($bdd, $sQuery ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
        $aResultTotal = mysqli_fetch_array($rResultTotal);
        $iTotal = $aResultTotal[0];
     
     
        /*
         * Output
         */
        $output = array(
            "sEcho" => intval($_GET['sEcho']),
            "iTotalRecords" => $iTotal,
            "iTotalDisplayRecords" => $iFilteredTotal,
            "aaData" => array()
        );
     
        while ( $aRow = mysqli_fetch_array( $rResult ) )
        {
            $row = array();
            for ( $i=0 ; $i<count($aColumns) ; $i++ )
            {
                 if ( $aColumns[$i] != ' ' )
                {
                    /* General output */
                    $row[] = $aRow[ $aColumns[$i] ];
                }
            }
            $output['aaData'][] = $row;
        }
     
    	echo json_encode( $output );
     
     
    ?>
    Et voila !! bon courage pour toi

  7. #7
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2014
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Février 2014
    Messages : 43
    Points : 40
    Points
    40
    Par défaut index.php
    @LAKHTR
    Merci Mr Lakhtr de me proposé ce plugin que je connaissais pas, j'a réussi a l’intégrer dans mon code, par contre j'ai utiliser que le fichier index.php mais pas le facture.php
    j'ai fait l'appel au plugin et au cdn dans mon script, mtn j'ai la pagination et je peut effectuer des recherches dans ma table.

    je profite de votre connaissance de ce plugin, parce que je souhaite avoir la possibilité d'additionner la somme des champs d'une colonne, en faite j'ai une colonne "prix" ou il ya beaucoup d'enregistrement, sera t'il possible avec ce plugin d'additionner tous les enregistrement?? je sais que en sql je peut faire SUM(prix) mais si ce plugin permet de le faire ça sera vraiment l’idéal
    merci d'avance

Discussions similaires

  1. alterner les couleurs dans un tableau avec xsl
    Par Eithelgul dans le forum XSL/XSLT/XPATH
    Réponses: 14
    Dernier message: 03/05/2015, 23h29
  2. Trier un tableau dans une HTA avec javascript
    Par snorky94 dans le forum VBScript
    Réponses: 18
    Dernier message: 23/12/2013, 11h19
  3. Inclure une page dans dans une tableau avec javascript
    Par pierrot10 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 26/09/2005, 12h31
  4. navigation dans une jsp avec javascript
    Par petitelulu dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 15/11/2004, 18h55
  5. balise <img> dans un tableau avec firefox
    Par yannock dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 25/10/2004, 16h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo