Datatable - Tri / Date & Plugins

Version imprimable

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:

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:

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

08/09/2014, 05h55
laztog

Quelqu'un aurait'il une idée ?

Merci d'avance
15/09/2014, 13h01
darkterreur

Bonjour,

à tu une erreur js en console lors de l'exécution de ta page ?
15/09/2014, 13h12
SpaceFrog

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

tu as ceci

Citation:

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

il te faut trier sur

Citation:

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

Mais il semblerait même en lisant la doc :roll: qu c'est déja prévu

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

Code:

date-eu
15/09/2014, 14h13
laztog
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:

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.
15/09/2014, 15h38
darkterreur

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:

echo '<thead><tr>';
15/09/2014, 16h13
laztog
Effectivement le tr était un oublie :)

Merci
Code:

1 2 3 4 5 6 7 8 9 10 <script type="text/javascript"> $(document).ready(function() { $('#example').dataTable( { columnDefs: [ { type: 'date-eu', targets: 1 } ] } ); } ); </script>
Ca me bloque la colonne 1.

Si je mets 0 ca me bloque le trie sur l'id.
Si j'enleve la target, je peux trier partout.

Sauf qu'en date jj/mm/aaaa ca ne marche pas

Si je mets en format AAAA-MM-JJ.
Aucun souci. Pour le moment je trie en format américain mais c'est pas top pour la lisibilté.

Après je penses que celà vient de mes connaissances vraiment limite dans la compréhension du code :/

Pour ca que je bloque sur les dates et les outils d'export

Merci pour tes idées :)
15/09/2014, 16h20
darkterreur
le code
Code:

1 2 3 4 5 <thead> <tr> <th></th> </tr> </thead>
ne pose pas de problème mais je ne voit pas la fermeture de ton TR.

Pour le reste je cherche pour voir.
15/09/2014, 18h39
darkterreur

J'ai trouver ceci comme solution, je ne sais pas ce que cela vaut, a tester.

Citation:

My solution was to put this piece of code in the specific column in the datatable definition ?

"mRender": function (data, type, full) {
var dtStart = new Date(parseInt(data.substr(6)));
var dtStartWrapper = moment(dtStart);
return dtStartWrapper.format('DD/MM/YYYY HH:mm');
}

Si tu regarde le mec convertis la date directement dans le passage de paramètre.

J'ai ceci aussi Soit 1 pour toi

Code:

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

Oui quand je disais que le <tr> était un oublie, c'est lors du passage en DATATABLE, j'ai oublié de virer ce <TR> mais celà change pas la donne :/

Pour la date, c'est encore une enigme :)

Mais j'ai trouvé au passage mon souci pour tabletools

Je fourni la partie du code modifié

Code:

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
 
<link rel="stylesheet" href="theme/tata.css"/>
 
<!-- Nouveau -->
<script type="text/javascript" src="js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="js/jquery-ui.theme.min.css">
<link rel="stylesheet" href="js/dataTables.tableTools.css">
 
 
<!-- Script type changé au passage pour intégrer Tabletools, ne pas oublier de placer le fichier SWF -->
<script type="text/javascript">
/*
 * Example initialisation
 */
$(document).ready( function () {
    $('#example').dataTable( {
    	  columnDefs: [
       { type: 'date-dd-mmm-yyyy', targets: 1 }
     ],
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
        	"sSwfPath" : "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "print",
                {
                    "sExtends":    "collection",
                    "sButtonText": "Save",
                    "aButtons":    [ "csv", "pdf" ],
                }
            ]
        }
    } );
} );
</script>

Pour placer mes champs rechercher au centre

tata.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
/* Position du Show - Search */
 .dataTables_wrapper {
  position: relative;
  clear: both;
  zoom: 1;
  zoom: 1; }
  .dataTables_wrapper .dataTables_length {
    float: left; }
  .dataTables_wrapper .dataTables_filter {
    float: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto; }
    .dataTables_wrapper .dataTables_filter input {
      margin-left: 0.5em; }

Voila mon avancé, merci pour tes propositions, ca m'a redonné un coup de Boost :)

15/09/2014, 20h34
laztog

Bon j'ai encore du mal à comprendre comment remplacer mon jolie texte par de belles icones mais ca viendra XD
16/09/2014, 11h42
darkterreur

Bonjour,

Ravis de vous avoir donné un peu de motivation.

En revanche je ne comprend pas bien vos dernier post. Le problème avec les dates est il résolu ou non ?

Avez vous un autre problème avec dataTable ?

Cordialement
26/02/2015, 13h40
poulpman
Bonjour,
Impossible de faire fonctionner le plugin date-eu, il y a plein de forums qui en parlent mais rien n'a fonctionné pour moi (DataTables en version 1.10.5)
j'ai cherché une bonne heure avant de trouver une solution.

J'écris mes dates en anglais dans un div que je cache :
Code:

1 2 3 4 <td> <div class="hidden">2015-01-22</div> 22-01-2015 </td>
C'est tout simple, ça fonctionne... mais ce n'est pas très beau