2

我使用了带有固定列的角度数据表,我的 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作为这个图像:

未定义不是函数

如果我从表的选项中删除以下代码,则没有错误但没有固定列:

.withFixedColumns({
        leftColumns: 1
    });

我需要修复我的第一列,我该如何修复这个错误?

4

2 回答 2

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。

于 2015-07-24T19:06:52.567 回答
1

您只是忘记将ng属性添加到数据表中。

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

在此处输入图像描述

点击此处观看现场演示

于 2015-07-21T19:56:23.857 回答