PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

#1 05-05-2012 21:24:30

maxredphenix
Membre
Inscription : 06-11-2010
Messages : 58

Problème d'affichage de tableau utilisant "DATATABLES"

Bonjour,

Je voudrais utiliser datatable (http://datatables.net/) pour visualiser les données d'une table nommée appels.

J'en suis arrivée a ceci:
code de la page php contenant le tableau:

<?php
// On prolonge la session
session_start();
// On teste si la variable de session existe et contient une valeur
if(empty($_SESSION['login']))
{
  // Si inexistante ou nulle, on redirige vers le formulaire de login
  header('Location: authentification.php');
  exit();
}
?>
<!DOCTYPE html>
<?php
  $db = mysql_connect('localhost', 'root', '');
  mysql_select_db('gestspie', $db);
  $sql = 'SELECT * FROM appels ORDER BY id';
  $req = mysql_query($sql) or die (mysql_error());
?>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Titre -->
    <title>Gestion des Appels</title>
    <!------ Fichiers CSS ------->
    <link href="../css/template_formulaires.css" rel="stylesheet" type="text/css" /><!-- Appel du css pour la page html + Menu -->
    <link href="../css/fenetre_modale.css" rel="stylesheet" type="text/css" /><!-- CSS pour la fenêtre modale -->
    <link href="../css/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" /><!-- Appel du Theme JQUERY -->
    <link href="../css/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /><!-- Appel du css Datepicker JQUERY -->
    <link href="../css/datatable_style.css" rel="stylesheet" type="text/css" /><!-- Appel du css pour la mise en forme du tableau -->
    <link href="../css/datatable_table_jui.css" rel="stylesheet" type="text/css" /><!-- Appel du css pour la mise en forme du tableau -->
   
    <!-- Appel des divers scripts -->
    <script type="text/javascript" src="../javascript/menu.js"></script> <!-- Fichier javascript pour le changement de couleur du texte du MENU -->
    <script type="text/javascript" src="../javascript/jquery-1.7.2.min.js"></script> <!-- Script JQUERY minifiée-->
    <script type="text/javascript" src="../javascript/fenetre_modale.js"></script> <!-- Script ouverture de fenêtre modale-->
    <script type="text/javascript" src="../javascript/jquery.dataTables.js"></script> <!-- Plugin Datatable -->
    <script type="text/javascript" src="../javascript/jquery.datatables.tabletools.js"></script> <!-- Plugin Datatable pour l'exportation vers différents formats -->
    <script type="text/javascript" src="../javascript/jquery.datatables.zeroclipboard.js"></script> <!-- Datatable: Script utilisant un fichier Flash pour effectuer la copie vers le presse-papier -->
   
    <!-- Configuration de base du tableau Datatable -->
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
        $('#datatable').dataTable({
          "bProcessing": true,
          "bServerSide": true,
          "bJQueryUI": true,
          "sPaginationType": "full_numbers",
          "sDom": '<"clear"><"H"Tflr>t<"F"ip>',
          "oTableTools": { "sSwfPath": "datatable_swf/copy_cvs_xls_pdf.swf"},
          "sAjaxSource": "get_datatable.php",
          "oLanguage": { "sUrl": "datatable_fr.txt" },
        });
      });
    </script>
  </head>
  <body>
    <!-- En Tête -->
    <!-- Banniere avec logo -->
    <div id="header" class="banniere">
      <div id="logo"><a href="#?w=700" rel="popup_name" class="poplight" title="logo" alt="logo"><img src="../images/logo.gif" /></a></div>
      <div id="titre"><a>Gestion des Appels</a></div>
    </div>
     
    <!-- Menu -->
    <ul id="menu">
      <li><a href="../index.php">Revenir au menu</a></li> <!-- Enregistrement de la page en cours après avoir rempli les champs du formulaire + Revenir au menu -->
      <li><a href="#">Graphiques</a></li><!-- Affichage des différents graphiques possibles -->   
    </ul>
    <form>
      <!-- Affichage du tableau -->
      <div id="tableau_appels">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="menuTable">
        <!-- Menu de la table -->
        <thead>  
          <!-- Gestion du nom des colonnes -->
          <tr>        
            <th width="5%">N°</th>  
            <th width="7%">Date</th>
            <th width="7%">Heure</th>  
            <th width="10%">Demandeur</th>          
            <th width="6%">Tel</th>
            <th width="5%">Bâtiment</th>  
            <th width="10%">Service</th>  
            <th width="10%">Média</th>
            <th width="10%">Type Inter</th>
            <th width="30%">Objet</th>    
          </tr>
        </thead>
        <!--Corps de la table : Affichage des données-->
        <tbody>  
          <tr>        
            <td colspan="10">Chargement des données...</td>    
          </tr>
        </tbody>
        <!-- Pied du tableau: on peut copier le contenu du thead si on souhaite afficher en haut et en bas le nom des colonnes -->
        <tfoot>  
          <tr>        
            <th colspan="10"> </th>
          </tr>
        </tfoot>
        </table>
      </div>
    </form>
  </body>
</html>

Et voila la page de traitement des données mysql: get_datatable.php

<?php
  /* Array of database columns which should be read and sent back to DataTables. Use a space where
   * you want to insert a non-database field (for example a counter or static image)
   */

  $aColumns = array( 'id', 'date_appel', 'heure_appel', 'nom_demandeur', 'num_appelant', 'batiment', 'service', 'media', 'type_inter','objet_appel' );
 
  /* La Colonne qui est indéxé, ici c'est la colonne ID */
  $sIndexColumn = "id";
 
  /* MLa table de la base de donnée à utiliser*/
  $sTable = "appels";
 
    /* Connexion à la base de données MySQL*/
  $gaSql['user']       = "root";
  $gaSql['password']   = "";
  $gaSql['db']         = "gestspie";
  $gaSql['server']     = "localhost";
  $gaSql['type']       = "mysql";
/*
   * MySQL connection
   */

  $gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
    die( 'Impossible de se connecter au serveur' );
 
  mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
    die( 'Impossible de sélectionner la table'. $gaSql['db']);
 
 
  /* Paging */
  $sLimit = "";
  if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
  {
    $sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
      mysql_real_escape_string( $_GET['iDisplayLength'] );
  }
 
  /* Ordering */
  $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] ) ]."` ".
          mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
      }
    }
   
    $sOrder = substr_replace( $sOrder, "", -2 );
    if ( $sOrder == "ORDER BY" )
    {
      $sOrder = "";
    }
  }
 
  /* Filtrage */
  $sWhere = "";
  if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
  {
    $sWhere = "WHERE (";
    for ( $i=0 ; $i<count($aColumns) ; $i++ )
    {
      $sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
    }
    $sWhere = substr_replace( $sWhere, "", -3 );
    $sWhere .= ')';
  }
 
  /* Filtrage individuel des colonnes */
  for ( $i=0 ; $i<count($aColumns) ; $i++ )
  {
    if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
    {
      if ( $sWhere == "" )
      {
        $sWhere = "WHERE ";
      }
      else
      {
        $sWhere .= " AND ";
      }
      $sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
    }
  }
 
  /* Requête SQL - Recupérer les données à afficher */
  $sQuery = "
    SELECT SQL_CALC_FOUND_ROWS `"
.str_replace(" , ", " ", implode("`, `", $aColumns))."`
    FROM   $sTable
    $sWhere
    $sOrder
    $sLimit
    "
;
  $rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
 
  /* Data set length after filtering */
  $sQuery = "
    SELECT FOUND_ROWS()
  "
;
  $rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
  $aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
  $iFilteredTotal = $aResultFilterTotal[0];
 
  /* Total data set length */
  $sQuery = "
    SELECT COUNT(`"
.$sIndexColumn."`)
    FROM   $sTable
  "
;
  $rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
  $aResultTotal = mysql_fetch_array($rResultTotal);
  $iTotal = $aResultTotal[0];
 
 
  /* Output */
  $output = array(
    "sEcho" => intval($_GET['sEcho']),
    "iTotalRecords" => $iTotal,
    "iTotalDisplayRecords" => $iFilteredTotal,
    "aaData" => array()
  );
 
  while ( $aRow = mysql_fetch_array( $rResult ) )
  {
    $row = array();
    for ( $i=0 ; $i<count($aColumns) ; $i++ )
    {
      if ( $aColumns[$i] == "version" )
      {
        /* Special output formatting for 'version' column */
        $row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
      }
      else if ( $aColumns[$i] != ' ' )
      {
        /* General output */
        $row[] = $aRow[ $aColumns[$i] ];
      }
    }
    $output['aaData'][] = $row;
  }
 
  echo json_encode( $output );
?>

Mais voila ce que j'obtiens:
[img align=C]http://dl.dropbox.com/u/31901874/apercu%20tableau.jpg[/img]

Je sais pas d'ou peut venir le problème, j'ai passer plusieurs heures a rechercher le soucis et a lire des tutos mais rien....

J'espère que quelqu'un pourra m'aider

Merci d'avance

Maxredphenix


Hors ligne

#2 05-05-2012 22:06:38

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Problème d'affichage de tableau utilisant "DATATABLES"

Saluton,

Quand je vous le disais, encore un qui me mets un "s" à souci au singulier.

C'est quoi un virus ?, un TOC (Trouble Obessionnel Compulsif) ?

Bizarre, bizarre.

Bon, ceci dit, que ça ne vous empêche pas, les accros du JQuery et autre JASON (Pierrot, Jc) de lui venir en aide. Après tout la grammaire, c'est secondaire (en fait, dans ce cas-ci, ce serait même primaire).


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#3 06-05-2012 10:10:52

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 168

Re : Problème d'affichage de tableau utilisant "DATATABLES"

$('#datatable').dataTable(.............



je ne vois aucun objet ayant l'id datatable ????

est-ce normal docteur ?????


a++

Hors ligne

#4 06-05-2012 12:33:11

maxredphenix
Membre
Inscription : 06-11-2010
Messages : 58

Re : Problème d'affichage de tableau utilisant "DATATABLES"

Merci pour vos réponses (et désolé pour le "s" ça doit être un habitude sad )

Pour ce qui est du div je me suis fier aux exemples du site:
Code initialisation:

$(document).ready(function(){
    $('#example').dataTable();
});

Tu ferais l'initialisation comment?

Encore merci

Hors ligne

#5 06-05-2012 13:08:47

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 168

Re : Problème d'affichage de tableau utilisant "DATATABLES"

Tu ferais l'initialisation comment?

bah, en donnant un id valide déjà.

a++

Hors ligne

#6 06-05-2012 13:28:35

maxredphenix
Membre
Inscription : 06-11-2010
Messages : 58

Re : Problème d'affichage de tableau utilisant "DATATABLES"

a oui, jsuis c**, j'avais pas fait gaffe je faisais une initialisation avec #datatable alors que mon id était menuTable. Je viens de changer et j'ai donc ceci:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="datatable">

C'est bon ça fonctionne maintenant

Encore merci, j'ai plus qu'a modifier mon css pour que l'affichage soit correct et tout va rouler correctement.

maxredphenix

Dernière modification par maxredphenix (06-05-2012 14:00:09)

Hors ligne

#7 06-05-2012 17:23:34

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Problème d'affichage de tableau utilisant "DATATABLES"

Donc, il n'y a plus de souci(s):lol:


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#8 06-05-2012 20:02:43

maxredphenix
Membre
Inscription : 06-11-2010
Messages : 58

Re : Problème d'affichage de tableau utilisant "DATATABLES"

Non plus de souci(s). smile Encore merci

Dernière modification par maxredphenix (06-05-2012 20:03:02)

Hors ligne

#9 07-05-2012 09:28:36

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 168

Re : Problème d'affichage de tableau utilisant "DATATABLES"

c'était juste une sursis big_smile
a++

Hors ligne

#10 07-05-2012 18:59:40

maxredphenix
Membre
Inscription : 06-11-2010
Messages : 58

Re : Problème d'affichage de tableau utilisant "DATATABLES"

lol

Hors ligne

#11 07-05-2012 19:06:16

maxredphenix
Membre
Inscription : 06-11-2010
Messages : 58

Re : Problème d'affichage de tableau utilisant "DATATABLES"

Sinon juste comme ca, a l'heure actuelle j'ai toutes mes pages php qui sont dans le même dossier, est-ce que ce serait pas mieux de séparer dans des sous-dossiers?

Un dossier pour les pages qui contiennent les tableaux datatable
Un dossier pour les pages de création de formulaires
Un dossier pour les pages de visualisation/modif des formulaires lors d'un double clic sur la ligne du tableau datatable
Un dossier pour les pages servant au traitement des données pour les envoyer à la bdd
etc...

Est-ce que c'est mieux d'après toi ou bien inutile?

Encore merci

Hors ligne

#12 07-05-2012 19:37:45

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : Problème d'affichage de tableau utilisant "DATATABLES"

Bonjour,

Une structuration d'application passe avant tout par une architecture fichier cohérente. Cela ne sera donc jamais inutile, et la maintenance de ton code ne pourra que s'en porter que mieux. Par contre changer l'arborescence applicative une fois l'application développée peut s'avérer long et fastidieux surtout si cela n'a pas été prévu initialement dans le code et d'autant plus si des fonctions ajax ont été développées.

++

Dernière modification par Jc (07-05-2012 19:38:04)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#13 08-05-2012 09:34:54

maxredphenix
Membre
Inscription : 06-11-2010
Messages : 58

Re : Problème d'affichage de tableau utilisant "DATATABLES"

Bonjour,

Merci pour ta réponse, je vais donc structurer mon site dans cette architecture la. Je préfère maintenant quitte à perdre 2h si quelqu'un de plus expérimenté que moi me conseille de le faire.

Merci

maxredphenix

Hors ligne

Pied de page des forums