Getting mData error for Date sorting

mastersuse

I want to sort my date using function in table, but getting this error.
Uncaught TypeError: Cannot read property 'mData' of undefined

This is a piece of my Table data. I have a problem with sorting date, So I create a function for sorting.

This is my JS and datatable, I use datatable purposely to display their features like search box, exporting, pagination.

"<table id='' class='table table-striped Layer3Table'>"+
    "<thead>"+
        "<tr>"+
            "<th class='text-center'>Activity Name</th>"+
            "<th class='text-center'>Owner</th>"+
            "<th class='text-center'>Plan Start Date</th>"+
            "<th class='text-center'>Plan Finish Date</th>"+
            "<th class='text-center'>Actual Start Date</th>"+
            "<th class='text-center'>Actual Finish Date</th>"+
        "</tr>"+
    "</thead>";
    $.each(value2.l3_task, function(key, value3){
        project += 
        "<tbody>"+
            "<tr>"+
                "<td class='text-center'>"+value3.task_name+"</td>"+
                "<td class='text-center'>"+value3.task_owner+"</td>"+
                "<td class='text-center'>"+value3.task_planned_start_date+"</td>"+
                "<td class='text-center'>"+value3.task_planned_end_date+"</td>"+
                "<td class='text-center'>"+value3.task_start_date+"</td>"+
                "<td class='text-center'>"+value3.task_end_date+"</td>"+
            "</tr>"+
        "</tbody>";
    });
    project +=
"</table>"+

// Only this 4 that I want to use sorting function.
$('table.Layer3Table').DataTable({
    columns:[
        {data: "task_planned_start_date", render: handlerRenderDate},
        {data: "task_planned_end_date", render: handlerRenderDate},
        {data: "task_start_date", render: handlerRenderDate},
        {data: "task_end_date", render: handlerRenderDate},
    ]
});

and this is my function (ISO 8601 format.)

function handlerRenderDate(data, type){
    if (type === 'sort') {
        return data;
    }
}

allan

Your HTML defines 6 columns, but your columns only defines 4 columns. If you are using columns, the array must exactly match the number of columns. You can use null if you don't want to specify any options for a column.

Allan

mastersuse

Hi allan, I already add the other column [] exact as in table. but this error appear.

columns:[
    null, //name
    null, //owner
    {data: "task_planned_start_date", render: handlerRenderDate},
    {data: "task_planned_end_date", render: handlerRenderDate},
    {data: "task_start_date", render: handlerRenderDate},
    {data: "task_end_date", render: handlerRenderDate},
]

and the column is balnk

mastersuse

Issue solved. I applying this solution and worked.

https://datatables.net/plug-ins/sorting/date-eu

colin

Yep, you only need to define columns.data if the data is being given as an object either via data or by ajax. It looks like you're not doing this - you're just using the data already in the DOM.

If that is the case, just remove the columns.data from the columns block,

Colin