17

I have a function that displays objects in my array using datatables. I'm a bit a problem with changing the date and time format from ISODate to human readable format.

myData

var datas = {“rows” : [{_id: "2017-01-03T00:00:00.000Z", Humidity: 24, Temperature: 18},

{_id: "2017-01-04T00:00:00.000Z", Humidity: 23.071428571428573, Temperature: 18.928571428571427} ]}

JS script

var table = $('#myTable').DataTable( { 
    data: datas.rows,
            "columns": [
                { data: "_id" },
                { data: "Temperature" },
                { data: "Humidity" }

            ]
    });

Thanks for your anticipated help.

Ekom
  • 599
  • 3
  • 8
  • 24
  • What does human-readable means precisely in your case? – kraskevich Jan 06 '17 at 21:40
  • 1
    https://datatables.net/reference/option/columns.render to change how values are displayed, and http://momentjs.com/ would be helpful to get the date in the format you want. – Paul Abbott Jan 06 '17 at 21:43
  • @kraskevich YYYY:MM:DD HH:MM that what i mean. – Ekom Jan 06 '17 at 23:13
  • @PaulAbbott thanks for the link. I have 3 columns but I only want to render one. Does the render function come immediately after the specific column or do I add it at the end of the `{data: "Humidity"}` ?? – Ekom Jan 06 '17 at 23:15
  • @PaulAbbott Can you show me an example of how I can construct this? The link didn't give me what I was looking for. – Ekom Jan 07 '17 at 00:40

1 Answers1

27

As noted by @Paul Abbott above, momentjs and a render function should see you right:

var datas = {
    "rows": [
        {
            _id: "2017-01-03T00:00:00.000Z", 
            Humidity: 24, 
            Temperature: 18
        },
        {
            _id: "2017-01-04T00:00:00.000Z", 
            Humidity: 23.071428571428573, 
            Temperature: 18.928571428571427
        } 
    ]
}


var table = $('#myTable').DataTable( { 
    data: datas.rows,
    "columns": [
        { 
            data: "_id",
            render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM-DD-YYYY HH:mm");
            }
        },
        { 
            data: "Temperature" 
        },
        { 
            data: "Humidity" 
        }

    ]
});
annoyingmouse
  • 5,524
  • 1
  • 27
  • 45
  • Thanks for your response. I'm getting an error `TypeError: undefined is not an object (evaluating '$.fn.dataTable.render')`. Although I included the datetime cdn in my HTML file. – Ekom Jan 07 '17 at 20:22
  • Apparently my scripts weren't in order but i'm still getting an error `moment is not a function` – Ekom Jan 08 '17 at 03:07
  • Without being able to see your script I can't tell what's going on. This is a working example: https://jsfiddle.net/annoyingmouse/hpgafeys/. You'll need to include, in this order, jQuery, DataTables and MomentJS. – annoyingmouse Jan 09 '17 at 07:39
  • Thank you! I keep getting `moment is not a function`. Could this because i'm not loading the scripts in the right order? – Ekom Jan 09 '17 at 07:42
  • Quite possibly. Did you check the Fiddle? Do you want to put your script up on JSFiddle so we can check it together? – annoyingmouse Jan 09 '17 at 07:43
  • @annoyingmosuse Yes I did. I think I see what I was missing. I didn't include the `moment with locales` script. – Ekom Jan 09 '17 at 07:47
  • Thank you so much @annoyingmouse. This is a bit of scope but is there a way I can round up figures in the table? – Ekom Jan 09 '17 at 07:56
  • Of course, again use a render function and this: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math/round – annoyingmouse Jan 09 '17 at 08:00
  • I just figured the dates are a bit off. The table produces dates a day before the actual date. See your jsfiddle. A bug maybe? – Ekom Jan 09 '17 at 08:03
  • Not an issue for me, I'm getting the 3rd and 4th. The dates are in UTC, it might be because you're in a different region? – annoyingmouse Jan 09 '17 at 08:06
  • Okay that's a bit odd. I have used different date formats getting the same thing. – Ekom Jan 09 '17 at 08:14
  • This essentially kills the sorting feature – Sandor May 25 '18 at 12:31
  • @Sandor, just added some more dates with more varied values and I'm able to sort... what's is your particular issue? https://jsfiddle.net/annoyingmouse/hpgafeys/ – annoyingmouse May 29 '18 at 06:21
  • @annoyingmouse please see [https://jsfiddle.net/ca8w78y1/](https://jsfiddle.net/ca8w78y1/) for reference – Sandor May 30 '18 at 07:30
  • 1
    @Sandor, I stand corrected - does this do what you need: https://jsfiddle.net/annoyingmouse/cgqqLaw1/ – annoyingmouse May 30 '18 at 09:11
  • 1
    @annoyingmouse: mea culpa, the _if(type === "sort" || type === "type")_ did the trick however please be aware that there is an error in the answer since the _function(d)_ definition instead of _function (data, type, row)_ – Sandor May 30 '18 at 10:07