角度数据表固定列未定义不是函数

时间:2015-07-21 19:21:57

标签: javascript jquery angularjs datatable angular-datatables

我使用angular datatables with fixed column,我的HTML代码视图如下:

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

我的控制器代码如下:

'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
    });

}]);

对于我的index.html文件,我按以下顺序包含了数据表库:

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

这是我的模块:

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

但是我得到了这个错误undefined is not a function

Undefined is not a function

如果我从表的选项中删除了以下代码,没有错误但没有fixedColumns:

.withFixedColumns({
        leftColumns: 1
    });

我需要修复第一列,如何修复此错误?

2 个答案:

答案 0 :(得分:3)

我在github上发布了这个问题,并且l-lin回答了它。

我错过了以下内容:

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

我应该下载FixColumns jQuery。

答案 1 :(得分:1)

您忘了将ng属性添加到数据表中。

下面是工作屏幕截图...

enter image description here

点击here for Live Demo