order date format dd / mm / yyyy

order date format dd / mm / yyyy

tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
edited August 2011 in General
Hello Good Day
I need to order the entire column this date format dd / mm / yyyy
I was watching and trying to make it work achievement plugins butnot
thank you very much
«1

Replies

  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edited August 2011
    see Andy McMaster's code on http://www.datatables.net/plug-ins/sorting

    he uses a very simple approach. taking the strings from the date, concatenating them together as a single number that can be sorted. dd/mm/yyyy becomes yyyymmdd;

    to use this code, specify the sType of your column "uk_date".

    [code]
    $('#example').dataTable({
    aoColumnDefs: {
    target: [3], // change to whichever column you need. indexed at 0
    sType: "uk_date"
    }
    });
    [/code]

    [code]
    jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };
    [/code]
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    Hello how are you Thank you for responding so quickly
    I'm trying and I can not run, I show you my code so you tell me where I'm wrong
    I am showing the date from mysql in this format dd / mm / yyy
    thank you very much
    [code]
    jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };

    var oTable;
    var asInitVals = new Array();

    $(document).ready(function() {


    oTable = $('#example').dataTable( {
    "sPaginationType": "full_numbers",
    "sScrollX": "100%",
    "sScrollXInner": "100%",
    "sScrollY": "330px",
    "iDisplayLength": 25,
    "FixedColumns":true,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "server_bcompra.php",
    "bAutoWidth":false,
    "aoColumns" : [
    { "sWidth": "11%" },
    { "sWidth": "32%" },
    { "sWidth": "3%","sClass": "clase","bSortable": false},
    { "sWidth": "12%" },
    { "sWidth": "8%","sClass": "clase","bSortable": false},
    { "sWidth": "15%","bSortable": false},
    { "sWidth": "10%" },
    { "sWidth": "9%","sType": "uk_date" }
    ] [/code]
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    do you have spaces in your date? "03 / 05 / 2011"? or "03/05/2011"?
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    no, I bring the date from the database in this way without spaces 03/12/2011,
    the code I'm using is correct?
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    yes, it looks right. do you have a link to your page?
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    no, but you prepare it and you pass the link
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    Well, I could run it from the web but I got the file so that you look
    thank you very much
    www.sincroniavirtual.com/nuevo.php
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    sorry
    www.sincroniavirtual.com/nuevo.rar
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    and I have the link
    www.http://sincroniavirtual.com/tabla/tabla.php
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    the sort function worked fine when I ran it.

    I don't know if you're getting other errors in other parts because I had to provide my own data.
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    was functioning well in both local and remote server
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    hi fbas
    I still can not fix it you may find the error
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edited August 2011
    why do you have the jQuery.fn.dataTableExt.aTypes.push line?

    it's looking for dd-mm-yyyy (and not dd/mm/yyyy) and if not finding it, setting type to null

    and aside from that, I don't see why you want or need that.
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    not really when I'm wrong and I tried everything and if I have these lines
    [code]jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) {

    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    //Treat blank/non date formats as highest sort
    if (isNaN(parseInt(ukDatea[0]))) {
    return 1;
    }

    if (isNaN(parseInt(ukDateb[0]))) {
    return -1;
    }

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    //Treat blank/non date formats as highest sort
    if (isNaN(parseInt(ukDatea[0]))) {
    return -1;
    }

    if (isNaN(parseInt(ukDateb[0]))) {
    return 1;
    }

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };

    jQuery.fn.dataTableExt.aTypes.unshift(
    function ( sData )
    {
    if (sData.match(/^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/(19|20|21)\d\d$/))
    {
    return 'uk_date';
    }
    return null;
    }
    );[/code]
    and then initialize it this way would have to work?
    [code] "aoColumns" : [
    { "sWidth": "11%" },
    { "sWidth": "34%" },
    { "sWidth": "3%","sClass": "clase","bSortable": false},
    { "sWidth": "12%" },
    { "sWidth": "8%","sClass": "clase","bSortable": false},
    { "sWidth": "15%","bSortable": false},
    { "sWidth": "10%" },
    { "sType":"uk_date","sWidth": "7%" }
    ] ,[/code]
    Forgive me if not understood, because they write or speak English
    I am translating from google
    Thank you very much for your interest in my problem
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    Hello I tested without using server_processing
    [code] sAjaxSource ":" server_processing.php "[/ code]
    only doing MySQL queries from the same page and it worked perfectly!
    server_processing call from the date of this form
    [code] $ aColumns = "FORMAT (compra_total, 2 ))',' compra_usuario ',' DATE_FORMAT (compra_fecha,"% d /% m /% Y ")');[/ code]
    server_processing because since I work?
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edited August 2011
    I see. server processing requires the sorting to be done by your server script.

    you need to handle sorting in server_bcompra.php with a ORDER BY clause in your SQL.

    instead of formatting the date on the server side, you should let the server use it's own date, so it sorts properly

    then on the client side, you can use fnRender to reformat the date for the user to see.

    [code]

    $(document).ready(function() {


    oTable = $('#example').dataTable( {
    // ...
    "aoColumns" : [
    { "sWidth": "11%" },
    { "sWidth": "32%" },
    { "sWidth": "3%","sClass": "clase","bSortable": false},
    { "sWidth": "12%" },
    { "sWidth": "8%","sClass": "clase","bSortable": false},
    { "sWidth": "15%","bSortable": false},
    { "sWidth": "10%" },
    { "sWidth": "9%", "fnRender": format_ddmmyyyy(oObj) } // <--- EDIT Aug 7, 2011: note error here. do not provide parentheses and argument, just function reference
    ]
    });


    function format_ddmmyyyy(oObj) {
    var sValue = oObj.aData[oObj.iDataColumn]); // <--- EDIT Aug 7, 2011: note typo here. remove parenthesis, oObj.aData[oObj.iDataColumn];
    var aDate = sValue.split('-');

    return aDate[2] + "/" + aDate[0] + "/" + aDate[1];


    }
    [/code]
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    Yeah, I had noticed that and change it but still not working
    above wrote that he had discovered the error but I can not solve
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edited post above, regarding server side.
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    PERFECT! this is the solution
    Now I get to work with that
    Greetings and thank you very much for the will you do to solve my problem since
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    Excuse me, I can not make it work
    I am doing exactly what you said and still displays the date in this format yyyy-mm-dd
    [code]var oTable;
    var asInitVals = new Array();

    $(document).ready(function() {

    oTable = $('#example').dataTable( {
    "sPaginationType": "full_numbers",
    "sScrollX": "100%",
    "sScrollXInner": "100%",
    "sScrollY": "330px",
    "iDisplayLength": 25,
    "FixedColumns":true,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "server_bcompra.php",
    "bAutoWidth":false,

    "aoColumns" : [
    { "sWidth": "11%" },
    { "sWidth": "34%" },
    { "sWidth": "3%","sClass": "clase","bSortable": false},
    { "sWidth": "12%" },
    { "sWidth": "8%","sClass": "clase","bSortable": false},
    { "sWidth": "15%","bSortable": false},
    { "sWidth": "10%" },
    { "sWidth": "7%","fnRender": "format_ddmmyyyy(oObj)"}
    ] ,
    });

    })

    function format_ddmmyyyy(oObj) {
    var sValue = oObj.aData([oObj.iDataColumn]);
    var aDate = sValue.split('-');
    return aDate[2] + "/" + aDate[0] + "/" + aDate[1];
    }
    [/code]
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    [code]
    { "sWidth": "9%", "fnRender": format_ddmmyyyy }
    [/code]

    format_ddmmyyyy can not be in quotes. and I apologize for the error, but it should not have the parentheses either
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    if I leave it without quotes, I get this error and does not show row
    [code] { "sWidth": "7%", "fnRender": format_ddmmyyyy(oObj)}[/code]

    Uncaught TypeError: Cannot read property 'iDataColumn' of undefined
    format_ddmmyyyy
    (anonymous function)
    f.extend._Deferred.e.resolveWith
    f.e.extend.ready
    f.c.addEventListener.z
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    without the parenthesis

    fnRender expects a function (reference)

    it could also be written:
    [code]
    "fnRender": function(oObj) {
    var sValue = oObj.aData([oObj.iDataColumn]);
    var aDate = sValue.split('-');
    return aDate[2] + "/" + aDate[0] + "/" + aDate[1];
    }
    [/code]
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    [code]{ "sWidth": "7%", "fnRender":format_ddmmyyyy}[/code]
    [code]{ "sWidth": "7%", "fnRender": function(oObj) {
    var sValue = oObj.aData([oObj.iDataColumn]);
    var aDate = sValue.split('-');
    return aDate[2] + '/' + aDate[0] +'/' + aDate[1];
    }}[/code]
    try both ways and gives me this error
    Uncaught TypeError: Property 'aData' of object # is not a function

    Thanks for following
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    Perfect! Now ready
    was without parentheses jajajaja
    [code]var sValue = oObj.aData([oObj.iDataColumn]);[/code]
    must be written so
    [code]var sValue = oObj.aData[oObj.iDataColumn];[/code]
    Thank you very much for helping a newbie
    greetings!
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edited August 2011
    oh, I see. I missed that too. glad you got it working.

    for others looking at this code, here is a corrected version of the code above:

    [code]
    $(document).ready(function() {
    oTable = $('#example').dataTable( {
    // ...
    "aoColumns" : [
    { "sWidth": "11%" },
    { "sWidth": "32%" },
    { "sWidth": "3%","sClass": "clase","bSortable": false},
    { "sWidth": "12%" },
    { "sWidth": "8%","sClass": "clase","bSortable": false},
    { "sWidth": "15%","bSortable": false},
    { "sWidth": "10%" },
    { "sWidth": "9%", "fnRender": format_ddmmyyyy }
    ]

    }); // end of oTable init

    }); // end of document.ready()

    // Take date from mysql, formatted yyyy-mm-dd, and return as dd/mm/yyyy
    function format_ddmmyyyy(oObj) {
    var sValue = oObj.aData[oObj.iDataColumn];
    var aDate = sValue.split('-');

    return aDate[2] + "/" + aDate[1] + "/" + aDate[0];


    }
    [/code]
  • tumbero_xtumbero_x Posts: 63Questions: 0Answers: 0
    Problem solved!
    Following this comes another problem I is not very important but if you can better solve
    in the search for causes Multi_filter yyyy-mm-dd and not dd / mm / yyyy
    to solve it?
  • midjammidjam Posts: 13Questions: 0Answers: 0
    Thanks this has really helped me out!! :)
  • EdoardoEdoardo Posts: 1Questions: 0Answers: 0
    I had a similar issue.

    I became mad to order an italian/european time string like DD/MM/YYYY hh:mm:ss that i got from a PHP / MySQL Query.


    my solution was (is important that the string to be ordered be like "dd/mm/yyyy hh:mm:ss" with a 'blank' between date and time!

    [code]
    "aoColumns": [
    {sType: "it_date"},
    ]

    [/code]

    then

    [code]
    jQuery.fn.dataTableExt.oSort['it_date-asc'] = function(a,b) {
    var itDatea = a.split('/');
    var itDateb = b.split('/');

    var itYearTimeA = itDatea[2].split(' ');
    var itTimeA = itYearTimeA[1].split(':');

    var itYearTimeB = itDateb[2].split(' ');
    var itTimeB = itYearTimeB[1].split(':');

    var itHourA = itTimeA[0];
    var itMinuteA = itTimeA[1];
    var itSecondA = itTimeA[2];
    var itDayA = itDatea[0];
    var itMonthA = itDatea[1];

    var itHourB = itTimeB[0];
    var itMinuteB = itTimeB[1];
    var itSecondB = itTimeB[2];
    var itDayB = itDateb[0];
    var itMonthB = itDateb[1];

    var itYearA = itYearTimeA[0];
    var itYearB = itYearTimeB[0];

    var x = (itYearA + itMonthA+ itDayA + itHourA + itMinuteA + itSecondA) * 1;
    var y = (itYearB + itMonthB + itDateB + itHourB + itMinuteB + itSecondB) * 1;

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['it_date-desc'] = function(a,b) {
    var itDatea = a.split('/');
    var itDateb = b.split('/');

    var itYearTimeA = itDatea[2].split(' ');
    var itTimeA = itYearTimeA[1].split(':');

    var itYearTimeB = itDateb[2].split(' ');
    var itTimeB = itYearTimeB[1].split(':');

    var itHourA = itTimeA[0];
    var itMinuteA = itTimeA[1];
    var itSecondA = itTimeA[2];
    var itDayA = itDatea[0];
    var itMonthA = itDatea[1];

    var itHourB = itTimeB[0];
    var itMinuteB = itTimeB[1];
    var itSecondB = itTimeB[2];
    var itDayB = itDateb[0];
    var itMonthB = itDateb[1];

    var itYearA = itYearTimeA[0];
    var itYearB = itYearTimeB[0];

    var x = (itYearA + itMonthA+ itDayA + itHourA + itMinuteA + itSecondA) * 1;
    var y = (itYearB + itMonthB + itDateB + itHourB + itMinuteB + itSecondB) * 1;


    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };

    [/code]
    this code worked for me
  • MargateSteveMargateSteve Posts: 5Questions: 0Answers: 0
    I would really appreciate any help with this as I have tried all of the suggestions here and in other places on this site but nothing has worked!

    I have a database field which holds date and time in YYYY-MM-DD hh:mm:ss format (2012-06-11 19:23:37). My ideal scenario is to be able to show this in several ways depending on the other data in the table. Sometimes I would want 11/06/12 and sometimes I might want 11th June 2012 - 19:23pm. As a basic just want to be able to format it more to a UK/European format.

    No matter what I try, the dates are sorted in ascending order, even though I specify it to sort descending in both the query and the script.

    I must be missing something simple and have posted my most recent attempt, using just one column while I try to crack this, which is based on Edoardo's solution above. When I run it, it neither formats or sorted the data so I must be missing something.

    Thanks for any help
    Steve

    [code]
    jQuery.fn.dataTableExt.oSort['it_date-desc'] = function(a,b) {
    var itDatea = a.split('/');
    var itDateb = b.split('/');

    var itYearTimeA = itDatea[2].split(' ');
    var itTimeA = itYearTimeA[1].split(':');

    var itYearTimeB = itDateb[2].split(' ');
    var itTimeB = itYearTimeB[1].split(':');

    var itHourA = itTimeA[0];
    var itMinuteA = itTimeA[1];
    var itSecondA = itTimeA[2];
    var itDayA = itDatea[0];
    var itMonthA = itDatea[1];

    var itHourB = itTimeB[0];
    var itMinuteB = itTimeB[1];
    var itSecondB = itTimeB[2];
    var itDayB = itDateb[0];
    var itMonthB = itDateb[1];

    var itYearA = itYearTimeA[0];
    var itYearB = itYearTimeB[0];

    var x = (itYearA + itMonthA+ itDayA + itHourA + itMinuteA + itSecondA) * 1;
    var y = (itYearB + itMonthB + itDateB + itHourB + itMinuteB + itSecondB) * 1;


    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['it_date-asc'] = function(a,b) {
    var itDatea = a.split('/');
    var itDateb = b.split('/');

    var itYearTimeA = itDatea[2].split(' ');
    var itTimeA = itYearTimeA[1].split(':');

    var itYearTimeB = itDateb[2].split(' ');
    var itTimeB = itYearTimeB[1].split(':');

    var itHourA = itTimeA[0];
    var itMinuteA = itTimeA[1];
    var itSecondA = itTimeA[2];
    var itDayA = itDatea[0];
    var itMonthA = itDatea[1];

    var itHourB = itTimeB[0];
    var itMinuteB = itTimeB[1];
    var itSecondB = itTimeB[2];
    var itDayB = itDateb[0];
    var itMonthB = itDateb[1];

    var itYearA = itYearTimeA[0];
    var itYearB = itYearTimeB[0];

    var x = (itYearA + itMonthA+ itDayA + itHourA + itMinuteA + itSecondA) * 1;
    var y = (itYearB + itMonthB + itDateB + itHourB + itMinuteB + itSecondB) * 1;

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };


    $(document).ready(function() {
    $('#example').dataTable({
    bAutoWidth: false,
    "sPaginationType": "full_numbers",
    "aaSorting": [[ 0, "desc" ]],
    "aoColumns": [{"sType": "it_date",}]
    });
    });





    <?php while ($rownews = mysql_fetch_array($qnews))
    { ?>
    <?php echo $rownews['DTE'] ?>
    <?php }?>

    [/code]
This discussion has been closed.