javascript - DataTables - Format returning ajax data - Stack Overflow

admin管理员组

文章数量:1415064

I am working on this example from DataTables but I have made modification so that it works with my ajax call to my API.

My problem is that my API returns the DateTime values like this...

Created=2015-02-13T00:00:00

I need to be able to convert that to just be just the date without the time for my table (hopefully without changing the API). I have tried everything that I know to try. I am still sort of a beginner at this advanced javascript stuff. I was trying to do just a simple substring but I dont think that is working. Well at least how I was trying anyways.

Thanks for anything help!

---

DataTables v1.10.5

Jquery v1.11.2 (due to need to support IE8)

Original Problem Code:

$(document).ready(function () {
var table = $('#AllHuddleRecords').DataTable({
    "ajax": "../api/huddle/posts",
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { "data" : "EmpName" },
        { "data": "Created" },
        { "data" : "PriorityName" },
        { "data" : "TopicName" }
    ]
});

Thanks to the guidance of cmxl...here is the working code...

var table = $('#AllHuddleRecords').DataTable({
    "ajax": "../api/huddle/posts",
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { "data" : "EmpName" },
        { "data": "Created" },
        { "data" : "PriorityName" },
        { "data" : "TopicName" }
    ],
    "columnDefs": [
        {
            "render" : function (data, type, row) {
                return new Date(data).toLocaleString();
            },
            "targets": 2
        }
        ]
});

I am working on this example from DataTables but I have made modification so that it works with my ajax call to my API.

My problem is that my API returns the DateTime values like this...

Created=2015-02-13T00:00:00

I need to be able to convert that to just be just the date without the time for my table (hopefully without changing the API). I have tried everything that I know to try. I am still sort of a beginner at this advanced javascript stuff. I was trying to do just a simple substring but I dont think that is working. Well at least how I was trying anyways.

Thanks for anything help!

---

DataTables v1.10.5

Jquery v1.11.2 (due to need to support IE8)

Original Problem Code:

$(document).ready(function () {
var table = $('#AllHuddleRecords').DataTable({
    "ajax": "../api/huddle/posts",
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { "data" : "EmpName" },
        { "data": "Created" },
        { "data" : "PriorityName" },
        { "data" : "TopicName" }
    ]
});

Thanks to the guidance of cmxl...here is the working code...

var table = $('#AllHuddleRecords').DataTable({
    "ajax": "../api/huddle/posts",
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { "data" : "EmpName" },
        { "data": "Created" },
        { "data" : "PriorityName" },
        { "data" : "TopicName" }
    ],
    "columnDefs": [
        {
            "render" : function (data, type, row) {
                return new Date(data).toLocaleString();
            },
            "targets": 2
        }
        ]
});

• javascript
• jquery
• ajax
• datatables

Share Improve this question Follow edited Feb 21, 2015 at 17:01 BinaryNexus asked Feb 19, 2015 at 21:38 BinaryNexusBinaryNexus 95433 gold badges1717 silver badges3131 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can hook in to the column rendering event. See the documentation here: https://datatables/examples/advanced_init/column_render.html

    $(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
            {
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) {
                    return data.slice(0, data.indexOf('T'));
                },
                "targets": 0
            },
            { "visible": false,  "targets": [ 3 ] }
        ]
    } );
} );

Or if you want to parse the string as a date you can refer to this answer here: Converting string to date in js

//...
"render": function ( data, type, row ) {
    return new Date(data).toString();
}
//...

Here you can look even deeper into the Date object in Javascript: https://developer.mozilla/de/docs/Web/JavaScript/Reference/Global_Objects/Date

Is it possible to do some pre-processing on your data before you send it to data tables, for example if you are inserting the following data into your data table, use Date.parse() on each element of your data to convert to the desired format?

var ajaxData = {
  "data": [{
    "EmpName": "Bob",
    "Created": "2015-02-13T00:00:00",
    "PriorityName": "Priority1",
    "TopicName": "Topic1"
  }]
};

$(ajaxData.data).each(function() {
  var dateMillis = new Date(this.Created);
  this.Created = dateMillis.getMonth() + "/" + dateMillis.getDay() + "/" + dateMillis.getFullYear();

});

Note that if you want to sort on your date column, then the solution may well be to pre-process data and convert dates to milliseconds using Date.parse() and then use render to convert the date to readable format as cmxl suggested. Good luck!

本文标签： javascriptDataTablesFormat returning ajax dataStack Overflow