dynamic headers in angularjs

nithyababu · March 2015

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>
               -->

<thead><th>id</th><th>name</th><th>age</th><th>column1</th><th>age1</th><th>column2</th><th>age2</th><th>column3</th><th>age3</th><th>column4</th>
</thead>
<tbody>
<tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr><tr><td>1</td><td>nithya</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td><td>23</td><td>1</td></tr>
</tbody>

          </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>

</html>

dynamic headers in angularjs

dynamic headers in angularjs

Howdy, Stranger!

Categories

DataTables

dynamic headers in angularjs

dynamic headers in angularjs

Howdy, Stranger!

Quick Links

Categories

DataTables