mastersuse
mastersuse

Reputation: 988

How to fix sorting issue date in datatables column?

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

Upvotes: 1

Views: 94

Answers (1)

Green Machine Disposer
Green Machine Disposer

Reputation: 113

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

Upvotes: 2

Related Questions