DataTables - TypeError preventing sort and filter
DataTables - TypeError preventing sort and filter
I am getting this error in Firefox: TypeError: aoColumns[srcCol] is undefined, and this error in Chrome: Uncaught TypeError: Cannot read property 'aDataSort' of undefined. I am loading data from a json file and everything seems to load alright, but the errors are preventing me from being able to sort and filter my table. I am not sure if I need to call the data a different way or if I should change anything specific in my code. Debug info: http://debug.datatables.net/otewuq
JS snippet that draws the table and calls the data:
$(document).ready(function() {
var oTable = $('#myTable').dataTable( {
"sDom": 'lrtip',
initComplete: function() {
var api = this.api();
api.columns('.filtersearch').indexes().flatten().each(function(i) {
var column = api.column(i);
var select = $('<select></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$': '', true, false)
.draw();
});
select.append('<option selected value="">' + $(column.header()).text() + '</option>');
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
}
});
});
var reportApp = angular.module('reportApp', ['ui.bootstrap']);
reportApp.controller('reportController', function($scope, $http) {
$http.get('../controllers/apps.json').success(function(data){
for (head in data) {
$scope.head = data.head;
}
for (details in data) {
$scope.details = data.details;
}
for (status in data) {
$scope.status = data.status;
}
for (errorCode in data) {
$scope.errorCode = data.errorCode;
}
for (apps in data) {
$scope.apps = data.apps;
}
});
});
HTML snippet:
<table id="myTable" class="table display">
<thead>
<tr>
<th ng-repeat="(i, th) in head" value="{{th.id}}" class="{{th.class}}"><span>{{th.name}}</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps | filter:search" ng-click="clickRow(app)" ng-class="{selected: app === selectedRow}">
<td>{{app.appName}}</td>
<td>{{app.dateCreated}}</td>
<td>{{app.dateUpdated}}</td>
<td>{{app.payload}}</td>
<td>{{status[app.status].name}}</td>
<td>{{errorCode[app.errorCode].name}}</td>
<td>{{app.errorDesc}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<th ng-repeat="(i, th) in head" value="{{th.id}}"><span>{{th.name}}</span></th>
</tr>
</tfoot>
</table>
JSON snippet:
{
"head" : [
{"id": 1, "name": "Application Name", "class": "filtersearch"},
{"id": 2, "name": "Date Created"},
{"id": 3, "name": "Date Updated"},
{"id": 4, "name": "Payload"},
{"id": 5, "name": "Status", "class": "filtersearch"},
{"id": 6, "name": "Error Code", "class": "filtersearch"},
{"id": 7, "name": "Error Description"}
],
"details" : [
{"id": 1, "name": "Application Name"},
{"id": 2, "name": "Error Description"},
{"id": 3, "name": "Record Count"},
{"id": 4, "name": "Record Fail"}
],
"status" : [
{"id": 1, "name": "Active"},
{"id": 2, "name": "Inactive"},
{"id": 3, "name": "Unknown"}
],
"errorCode" : [
{"id": 1, "name": "Code01"},
{"id": 2, "name": "Code02"},
{"id": 3, "name": "Code03"},
{"id": 4, "name": "Code04"}
],
"apps" : [
{"appName": "App01",
"dateCreated": "01/01/2015",
"dateUpdated": "01/04/2015",
"payload": "Payload01",
"status": 0,
"errorCode": 0,
"errorDesc": "Desc01",
"recordCount": 1,
"recordFail": 1},
Any help is appreciated!