1

I have datatables that contain of multiple column of dates. But all the column's date is not work perfectly when sorting asc and desc. Just to inform that all my date is in dd-mm-yyyy format. I am using a function to make it as dd-mm-yyyy.

enter image description here

I have trying to apply this reference but not help. I didn't know whether I am apply in the right way or not, please correct me.

HTML

<table id="projectListTable">
    <thead>
        <tr>
            <th>Project Name</th>
            <th>Plan Start</th>
            <th>Plan Finish</th>
        </tr>
    </thead>
</table>

JS

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "extract-date-pre": function(data) {
        if (data == null){
            return data;
        }
        else {
            new_data = data.split("T");
            new_data[0] = displayDate(new_data[0]);
            return new_data[0];
        }
    },
    "extract-date-asc": function(a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "extract-date-desc": function(a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});    

$('#projectListTable').DataTable({
    columns: [           
        { data : "project_name" },
        { data : "project_planned_start",        
            render: function(data){
                if (data == null){
                    return data;
                }
                else {
                    new_data = data.split("T");
                    new_data[0] = displayDate(new_data[0]);
                    return new_data[0];
                }
            }
        },
        { data : "project_planned_end",
            render: function(data){
                if (data == null){
                    return data;
                }
                else {
                    new_data = data.split("T");
                    new_data[0] = displayDate(new_data[0]);
                    return new_data[0];
                }
            }
        }     
    ],
    columnDefs: [
        {
            type: 'extract-date',
            targets: [1]
        },
        {
            type: 'extract-date',
            targets: [2]
        }
    ]
});

1 Answer 1

2

If your actual date data is in ISO 8601 format.

Example: 2019-03-12T04:08:08.069Z

You may use in render function of each column.

{
    data: "project_planned_start",
    render: function(data, type) {
        if (type === 'sort') { // ADD this for sorting
            return data;
        }
        if (data == null) {
            return data;
        } else {
            new_data = data.split("T");
            new_data[0] = displayDate(new_data[0]);
            return new_data[0];
        }
    }
},
Sign up to request clarification or add additional context in comments.

7 Comments

this jQuery.extend... is still require or not?
columnDefs still require or not?
If your data is on ISO 8601 format then they are not required. Also for column defs. You can specify both like this { type: 'extract-date', targets: [1,2] },
yes I am using ISO 8601 format. and your answer is working for me. thanks. will accept your answer.
Ex: for == "1" == 1 -> true, String and Number. === is strict.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.