I use angularjs with angular-datatables and the Columnfilter plugin. Initial Setup is working fine:
HTML:
<table datatable="" dt-options="data.dtOptions" dt-columns="data.dtColumns" class="table-1">
<tfoot style="display: table-header-group">
<tr>
<th>id</th>
<th>name</th>
</tr>
</tfoot>
</table>
Controller for the Site:
var siteController = app.controller("siteController", function($scope, $route, $http, $location, $compile, DTOptionsBuilder, DTColumnBuilder) {
$scope.data = this;
$scope.data.dtOptions = DTOptionsBuilder.fromSource('demodata.json')
.withDOM('<"top">rt<"bottom"ipl><"clear">')
.withColumnFilter({
aoColumns: [
null,
{
type: 'select',
bRegex: false,
values: ['Yoda', 'Titi', 'Kyle', 'Bar', 'Whateveryournameis']
}
]
});
$scope.data.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('id'),
DTColumnBuilder.newColumn('name').withTitle('name')
];
});
Now there is an example to autofill the select-dropdown with table Data:
[...]
.withColumnFilter({
aoColumns: [
null,
{
type: 'select',
bRegex: false,
values: function(aoData, oSettings){
var keys = new Array();
var values = new Array()
for(i=0; i<aoData.length; i++){
var item = aoData[i]._aData[3];
if(keys[item]==null){
keys[item] = true;
//values.push(item);
values.push({ value: item, label: 'The ' + item});
}
}
return values;
}
}
]
});
[...]
The site with the given example: https://jquery-datatables-column-filter.googlecode.com/svn/trunk/ajaxSource.html
The example is not working. Does someone know what I am doing wrong?