Datatable - Tri / Date & Plugins

**laztog** · 16/08/2014, 21h29

Bonjour,

Je souhaite faire un beau tableau de suivi réactif et jquery me paraissait pas mal.

J'ai réussi à faire mon tableau mais je bloque sur 2 points (les plugins):

Les Dates en format dd/mm/yyyy ne veulent pas se trier correctement.
25/02/1998
04/10/2009
03/02/1999

Je penses qu'il s'agit d'un plugins à installer mais je bloque.

Ainsi, j'arrive pas non plus à utiliser: TableTools ( https://datatables.net/extensions/tabletools/ )

Voici mon code et une base sql "Suivi" pour faire des tests

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
<title>Tableau 2.0</title>
 
<head>
 
<link rel="icon" type="image/png" href="theme/mushroom.png" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" href="theme/tata.css"/>
 
<!-- Datatable -->
<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable();
} );
</script>
</head>
 
 
<!-- Site -->
<center>
 
<?php
 
 
// Identification connexion
require 'config.php';
 
// connexion à la base  
mysql_connect($host,$user,$password) or die('Erreur de connexion au SGBD.');
 
// sélection de la base  
mysql_select_db($base) or die('La base de données n\'existe pas');
$sql = mysql_query( "SELECT Date_format(Date,'%d/%m/%y') as Date_fr, Date, Nom, Prenom, Tel, id FROM client ORDER BY Date DESC, id") or die (mysql_error());
 
//incrémentation d'un compteur en fonction du nombre de resultat (boucle alterner couleur)
  for ($i=0;$i<10;$i++)
 
//début du tableau
echo '<center>';
 
//Création du tableau
echo '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">';
// Premiere ligne
echo '<thead><tr>';
echo '<th width="25">Id</th><th><center>Date</th><th><center>Nom</center></th><th width="150"><center>Prenom</center></th><th width="200"><center>Telephone</center></th></thead>'; 
echo '<tbody>';
//Là on boucle sur les résultats
while ($donnees = mysql_fetch_array($sql))
{
    //on extrait les données du résultat
 
    $Date=$donnees['Date'];
    $Nom=$donnees['Nom'];
    $Prenom=$donnees['Prenom'];
    $Tel=$donnees['Tel'];
    $id=$donnees['id'];
 
 
    $Date_Eu= date("d/m/Y", strtotime($Date));
 
 
 
 
    //on affiche le résultat
    echo '<tr class="prem '.( ($i % 2 == 0) ? 'classe1' : 'classe2' ).'">'; // Alternance couleur
    echo '<td><center>'.$id.'</center></td>'; //Création d'une nouvelle colonne id (debugage) 
    echo '<td><center>'.$Date_Eu.'</center></td>'; //Création d'une nouvelle colonne
    echo '<td>'.$Nom.'</center></td>'; //Création d'une nouvelle colonne
    echo '<td><center>'.$Prenom.'</center></td>'; //Création d'une nouvelle colonne
    echo '<td><center>'.$Tel.'</center></td>'; //Création d'une nouvelle colonne
    echo '</tr>'; //Fin de la ligne
 
    //on incremente le compteur pour l'alternance
   $i++;    
} //fin de la boucle sur les résultats
echo '</tbody>';
echo '<tfoot><tr><th colspan="4">&nbsp;</th></tr></tfoot>';
mysql_free_result($sql);
mysql_close();
echo '</table>'; //Fermeture du tableau
 
?>
 
<br/>
 
</body>

Je vous fourni ma table "suivi" sql d'entrainement:

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
-- phpMyAdmin SQL Dump
-- version 4.1.4
-- http://www.phpmyadmin.net
--
-- Client :  127.0.0.1
-- GÃ©nÃ©rÃ© le :  Sam 16 AoÃ»t 2014 Ã* 21:25
-- Version du serveur :  5.6.15-log
-- Version de PHP :  5.4.24
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
 
--
-- Base de donnÃ©es :  `suivi`
--
 
-- --------------------------------------------------------
 
--
-- Structure de la table `client`
--
 
CREATE TABLE IF NOT EXISTS `client` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Nom` varchar(10) NOT NULL,
  `Prenom` varchar(10) NOT NULL,
  `Tel` varchar(10) NOT NULL,
  `Date` date NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `id_2` (`id`),
  KEY `id` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
 
--
-- Contenu de la table `client`
--
 
INSERT INTO `client` (`id`, `Nom`, `Prenom`, `Tel`, `Date`) VALUES
(1, 'Durant', 'Paul', '0123456789', '2001-07-01'),
(2, 'Leblanc', 'Jacky', '0234567891', '1998-09-02'),
(3, 'Dupond', 'Jean', '0345678912', '1999-02-03'),
(4, 'Petit', 'Maxime', '0456789123', '2009-10-04'),
(5, 'Lebon', 'Pierre', '0567891234', '2000-01-05'),
(6, 'Grand', 'Arnaud', '0678912345', '1998-02-25');
 
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Merci pour votre aide

**laztog** · 08/09/2014, 05h55

Quelqu'un aurait'il une idée ?

Merci d'avance

**darkterreur** · 15/09/2014, 13h01

Bonjour,

à tu une erreur js en console lors de l'exécution de ta page ?

**SpaceFrog** · 15/09/2014, 13h12

Le plugin dataTable permet d'avoir des fonction de tri personnalisées

tu as ceci

25/02/1998
04/10/2009
03/02/1999

il te faut trier sur

1998/02/25
2009/10/04
1999/02/03

Mais il semblerait même en lisant la doc

qu c'est déja prévu

http://datatables.net/plug-ins/sorting/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

date-eu

**laztog** · 15/09/2014, 14h13

Bonjour,

Merci pour vos réponses.

A première vu, pas d'erreur d’exécution.

Effectivement y a un plugins date-eu qui existe:
http://datatables.net/plug-ins/sorting/date-eu

J'ai chargé le fichier, j'ai mis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('#example').dataTable( {
     columnDefs: [
       { type: 'date-eu', targets: 0 }
     ]
  } );

en spécifiant bien ma colonne désirée mais aucun trie ce fait, ma colonne reste figé. Je suis sur que c'est un truc à la noix que j'ai pas compris de l'utilisation des modules additionnel/

Merci de votre aide.

**darkterreur** · 15/09/2014, 15h38

Si tu essaye avec la date au format AAAA-MM-JJ cela fonctionne t'il ?

Peut tu trier avec tes autres colones ?

Dans le doute pourquoi a tu un Tr dans le THEAD ligne 46

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<thead><tr>';

Datatable - Tri / Date & Plugins

jQuery

Vue hybride

Discussions similaires

Partager

Partager