Vous n'êtes pas identifié(e).
- Contributions : Récentes | Sans réponse
#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:
// 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
/* 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 195
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 
)
Pour ce qui est du div je me suis fier aux exemples du site:
Code initialisation:
$('#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 195
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:
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). 
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 195
Re : Problème d'affichage de tableau utilisant "DATATABLES"
c'était juste une sursis 
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"
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
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