25th Mar 2015dynamic headers in angularjs
hi all,i am new to angularjs.i create dynamic column table..i cant add datatable plugin..if i add means it shows aDatasort error...anyone know the solution means,kindly give me the solution
my code is
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" href="bootstrap.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://l-lin.github.io/angular-datatables/vendor/datatables-responsive/css/dataTables.responsive.css">
<link rel="stylesheet" href="http://l-lin.github.io/angular-datatables/vendor/datatables-fixedcolumns/css/dataTables.fixedColumns.css">
<link rel="stylesheet" href="http://l-lin.github.io/angular-datatables/styles/main.css">
</head>
<body>
<div ng-controller="ctrlRead as showCase">
<div class="col-md-12">
<table id="showcase-fixedcolumns" datatable dt-options="showCase.dtOptions">
<!-- <thead>
<tr>
<th ng-repeat="c in ordered_columns">{{ c.title }}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat="c in ordered_columns">{{ item[c.title] }}</td>
</tr>
</tbody>
-->
idnameagecolumn1age1column2age2column3age3column4
1nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya2312312312311nithya231231231231
</table>
</div>
</div>
</div>
</body>
<script src="http://l-lin.github.io/angular-datatables/vendor/angular-highlightjs/angular-highlightjs.min.js"></script>
<script src="http://l-lin.github.io/angular-datatables/vendor/angular-resource/angular-resource.min.js"></script>
<script src="http://l-lin.github.io/angular-datatables/vendor/datatables/media/js/jquery.dataTables.js"></script>
<script src="http://l-lin.github.io/angular-datatables/vendor/datatables-fixedcolumns/js/dataTables.fixedColumns.js"></script>
<script src="http://l-lin.github.io/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="http://l-lin.github.io/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.min.js"></script>
<script>
var fessmodule = angular.module('tests', ["withFixedColumns"]);
angular.module('withFixedColumns', ['datatables', 'datatables.fixedcolumns']).controller('ctrlRead', function ($scope, $filter,DTOptionsBuilder) {
$scope.items = [
{"id":1,"name":"name 1","description":"description 1","state":"field3 1","job":"field4 1"},
{"id":2,"name":"name 2","description":"description 1","state":"field3 2","job":"field4 2"},
{"id":3,"name":"name 3","description":"description 1","state":"field3 3","job":"field4 3"},
{"id":4,"name":"name 4","description":"description 1","state":"field3 4","job":"field4 4"},
{"id":5,"name":"name 5","description":"description 1","state":"field3 5","job":"field4 5"},
{"id":6,"name":"name 6","description":"description 1","state":"field3 6","job":"field4 6"},
{"id":7,"name":"name 7","description":"description 1","state":"field3 7","job":"field4 7"},
{"id":8,"name":"name 8","description":"description 1","state":"field3 8","job":"field4 8"},
{"id":9,"name":"name 9","description":"description 1","state":"field3 9","job":"field4 9"},
{"id":10,"name":"name 10","description":"description 1","state":"field3 10","job":"field4 10"},
{"id":5,"name":"name 5","description":"description 1","state":"field3 5","job":"field4 5"},
{"id":6,"name":"name 6","description":"description 1","state":"field3 6","job":"field4 6"},
{"id":7,"name":"name 7","description":"description 1","state":"field3 7","job":"field4 7"},
{"id":8,"name":"name 8","description":"description 1","state":"field3 8","job":"field4 8"},
{"id":9,"name":"name 9","description":"description 1","state":"field3 9","job":"field4 9"},
{"id":10,"name":"name 10","description":"description 1","state":"field3 10","job":"field4 10"}
];
//columns
$scope.ordered_columns = [];
$scope.all_columns = [{
"title": "id"
}, {
"title": "name"
}, {
"title": "description"
}, {
"title": "state",
}, {
"title": "job"
}];
$scope.$watch('all_columns', function() {
update_columns();
}, true);
var update_columns = function() {
$scope.ordered_columns = [];
for (var i = 0; i < $scope.all_columns.length; i++) {
var column = $scope.all_columns[i];
$scope.ordered_columns.push(column);
}
};
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('scrollY', '300px')
.withOption('scrollX', '100%')
.withOption('scrollCollapse', true)
.withOption('paging', false)
.withFixedColumns({
leftColumns: 3,
rightColumns: 1
});
});
</script>