Discussion :

[Kreepz]

Bonjours j'utilise depuis peu le plugins DataTables for jQuery.
Mais voilà, je n'aime pas trop la façon dont il tri les date, enfin plutôt le format de la date...



Mais j'aurais préfèré qu'il effectue le tri sur un format: d/m/Y mais ça ne fonctionne pas...
Je voulais donc savoir si quelqu'un avait déjà travaillé/modifié ce plugins notamment au niveau du filtre de la date?

Bonne journée!

[crazyyann]

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
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-eu-pre": function ( date ) {
        date = date.replace(" ", "");
        var eu_date, year;
 
        if (date == '') {
            return 0;
        }
 
        if (date.indexOf('.') > 0) {
            /*date a, format dd.mn.(yyyy) ; (year is optional)*/
            eu_date = date.split('.');
        } else {
            /*date a, format dd/mn/(yyyy) ; (year is optional)*/
            eu_date = date.split('/');
        }
 
        /*year (optional)*/
        if (eu_date[2]) {
            year = eu_date[2];
        } else {
            year = 0;
        }
 
        /*month*/
        var month = eu_date[1];
        if (month.length == 1) {
            month = 0+month;
        }
 
        /*day*/
        var day = eu_date[0];
        if (day.length == 1) {
            day = 0+day;
        }
 
        return (year + month + day) * 1;
    },
 
    "date-eu-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
 
    "date-eu-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

Plus d'explications ici

[Kreepz]

Merci, je l'ai implémanté au fichier js mais je ne voie pas comment l'insérer ce morceau:

Code :

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

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

dans le miens:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 <script type="text/javascript">
            $(function() {
                $("#example1").dataTable({
                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "bSort": true,
                    "bInfo": true,
                    "bAutoWidth": false
                });
 
            });
        </script>

[crazyyann]

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
 <script type="text/javascript">
            $(function() {
                $("#example1").dataTable({
                     columnDefs: [
                       { type: 'date-eu', targets: 0 }
                     ],
                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "bSort": true,
                    "bInfo": true,
                    "bAutoWidth": false
                });
 
            });
        </script>

La propriété "targets" te permet de définir à quelle colonne appliquer le tri. Attention la première colonne est 0 et pas 1.

Tu trouveras plus d'infos ici

[Kreepz]

J'ai donc mis :

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
$(function() {
                $("#example1").dataTable({
                    columnDefs: [
                       { type: 'date-eu', targets: 4 }
                     ],
                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "bSort": true,
                    "bInfo": true,
                    "bAutoWidth": false,
                    "columnDefs": [ {
                        type : 'date-eu',
                        targets : 4
                    } ]
                });
 
            });

J'ai comme colonne: Pseudo | Nom | Prénom | Email | Date Insciption | Actif | Option

Mais le tri ne fonctionne pas j'ai tenté avec le format d.m.Y, d/m/Y et d-m-Y.. :/

[crazyyann]

Tu as ajouté columnDefs 2 fois, ligne 3 et ligne 12.

Il serait plus simple que tu mettes un exemple sur jsfiddle.

[Kreepz]

Voilà:

http://jsfiddle.net/#&togetherjs=IIBaMNfOJK

[crazyyann]

L'adresse que tu fournis pointe vers un "projet" vide.

Utilise cette adresse. Une fois que tu auras fait tes modifs, utilise le bouton Update et donne nous l'adresse qui aura été générée.