DataTables for jQuery

Version imprimable

20/11/2014, 15h48
Kreepz

1 pièce(s) jointe(s)

DataTables for jQuery

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

Pièce jointe 161898

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

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

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

Code:

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

dans le miens:

Code:

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>

Code:

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

J'ai donc mis :

Code:

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
                    } ]
                });
 
            });

24/11/2014, 16h57
crazyyann

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

Il serait plus simple que tu mettes un exemple sur jsfiddle.
25/11/2014, 09h37
Kreepz

Voilà:

http://jsfiddle.net/#&togetherjs=IIBaMNfOJK
26/11/2014, 11h25
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.