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>';

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

Effectivement le tr était un oublie

Merci

Code :

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

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

**darkterreur** · 15/09/2014, 16h20

le code

Code :

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

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.

**darkterreur** · 15/09/2014, 18h39

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

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.

**darkterreur** · 15/09/2014, 18h46

J'ai ceci aussi Soit 1 pour toi

Code :

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

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

**laztog** · 15/09/2014, 20h15

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 :

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
 
<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 :

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
 
/* 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

**laztog** · 15/09/2014, 20h34

Bon j'ai encore du mal à comprendre comment remplacer mon jolie texte par de belles icones mais ca viendra XD

**darkterreur** · 16/09/2014, 11h42

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

**poulpman** · 26/02/2015, 13h40

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 html :

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

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

Datatable - Tri / Date & Plugins

jQuery

Discussions similaires

Partager

Partager