CODEWITHSUNDEEP
javascriptjquerydatatables
Amit Kumar Gupta
Amit Kumar Gupta

Reputation: 7413

DataTable Uncaught TypeError: column is undefined

Table Headings

<thead>
    <tr>
        <th rowspan="2">Project</th>
        <th rowspan="2">Status</th> 
        <th colspan="2">Features</th>
    </tr>
    <tr>
        <th>Passing</th>
        <th>Failing</th>
    </tr>
</thead>

JS Code

$('#projectstable').DataTable({
    "ajax":{
       url: "api/projects",
       "dataSrc": ''
     },
    "columns": [
        { "data": "title" },
        { "data": "status" },
        { "data": "features" , render: "passed"},
        { "data": "features" , render: "failed"},
    ]
});

Sample data

[{
        "id": "demo",
        "title": "demo project",
        "features": {
            "passed": 1,
            "failed": 0,
            "skipped": 0,
            "wip": 0
        }
}]

It gives Uncaught TypeError: column is undefined in console. Now if I replace columns with column then it gives following error in alert

DataTables warning: table id=projectstable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Upvotes: 1

Views: 2685

Answers (1)

Amit Kumar Gupta
Amit Kumar Gupta

Reputation: 7413

I found that this error comes when there are extra columns in the HTML but relevant column is not present in data source. It's is not related to columns property of dataTable. Second error comes when any of the property is not present in data source, null, or undefined. So I need to handle it using render.

{ 
    "data": "status", 
    render: function(data, type) {
       if(!data) return "";
    }
}

Upvotes: 2

Related Questions