Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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 ?

share|improve this question
    
Please check this ;ine angular.module('showcase.withFixedColumns', ['datatables', 'datatables.fixedcolumns']) . have you inject this datatables.fixedcolumns' ? – Ramesh Rajendran Jul 21 '15 at 19:33
    
@RameshRajendran Yes, I injected it, I add my module in Question – Mohamed Yakout Jul 21 '15 at 19:39
    
I think i have fount your issue by my answer. please let me know, if you have doubt – Ramesh Rajendran Jul 21 '15 at 20:09
up vote 2 down vote accepted

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.

share|improve this answer

You just forgot to add the ng attribute to the datatables.

Below is working Screen shot ...

enter image description here

Click here for Live Demo

share|improve this answer
    
The demo link not working with me, and I added ng attribute, and ng-repeat with sample array, got the same error – Mohamed Yakout Jul 21 '15 at 20:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.