Search code examples
javascriptjqueryangularjsdatatableangular-datatables

Angular datatables Fixed Columns undefined is not a function

I used angular datatables with fixed column, my HTML code for view as the following: 

<div class="row" ng-controller="PerformanceCtrl">
  <table  id="example" datatable="" 
          class="stripe row-border order-column" 
          dt-options="dtOptions">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>

            </tr>
        </thead>
        <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
        </tr>
   </tbody> 
 </table>

And my controller code as the following: 

'use strict';

app.controller('PerformanceCtrl', ['$scope', 'DTOptionsBuilder', 'DTColumnDefBuilder', function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('scrollY', '300px')
    .withOption('scrollX', '100%')
    .withOption('scrollCollapse', true)
    .withOption('paging', false)
    .withFixedColumns({
        leftColumns: 1
    });

}]);

And for my index.html file, I included datatables libraries as the following order: 

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="modules/performance/controller.js"></script>
<link rel="stylesheet" href="bower_components/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.css">
<script src="bower_components/DataTables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.min.js"></script>

<link rel="stylesheet" type="text/css" href="bower_components/DataTables/media/css/jquery.dataTables.min.css">

And This my module: 

var app = angular.module('MyApp', ['datatables', 'datatables.fixedcolumns']);

But I got this error undefined is not a function as this image:

Undefined is not a function

If I removed the following code from options of table, No error but no fixedColumns: 

.withFixedColumns({
        leftColumns: 1
    });

I need to make my first column fixed, How can I fix this error ?

Solution

  • I post this question on github, and l-lin answer on it.

    I missed including the following: 

    <script src="vendor/FixedColumns-3.0.4/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/FixedColumns-3.0.4/css/dataTables.fixedColumns.min.css">

    I should download the FixColumns jQuery.