修復頭插件在Angular數據表中不起作用

Question

我正在使用固定標頭jquery 插件的穩定版本穩定版本v2.1.2。 我正在嘗試修復我的表頭。 我創建了采用了棱角分明的DataTable提到在桌子上這里 。

在我的控制器類中，我編寫了以下代碼，

app.controller("SampleController", function ($scope) {

    $(document).ready( function () {
        var table = $('#example').DataTable();
        new $.fn.dataTable.FixedHeader( table );
    });

});

我的HTML如下，

 <table id="example" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" fix-header>
              <thead>
                <tr>
                    <th>Name </th>
                </tr>
               </thead>    
              <tbody> 
                   <tr ng-repeat="item in items">
                        <td>{{item.name}} </td>
                   </tr>
              </tbody>
 </table>

但是當我運行我的應用程序時，我收到以下錯誤，

TypeError：無法讀取未定義的屬性“childNodes”

我也嘗試使用以下指令，因為我知道DOM操作不應該在Controller中完成，但我得到以下錯誤。

TypeError：無法設置undefined的屬性'_oPluginFixedHeader'

更新：

我的指示

app.directive('fixHeader', function () {
    return {
        restrict: 'AE', //attribute or element
        replace: true,
        link: function ($scope, elem, attr) {
            $scope.table = elem.find("#example");  
            console.log($scope.table);
            var table= $scope.table.dataTable(); 
            new $.fn.dataTable.FixedHeader(table); 
        }
    };
});

請有人建議更好的解決方案嗎？

我使用的是dataTables.fixedHeader.js的 2.1.2版，我的錯誤來自下面一行

 var dt = $.fn.dataTable.Api ?
        new $.fn.dataTable.Api( mTable ).settings()[0] :
        mTable.fnSettings();

    dt._oPluginFixedHeader = this; //error over here

Answer 1

angular-datatables還為FixedHeader works with datatables. You need to add the files提供了與數據FixedHeader works with datatables. You need to add the files插件FixedHeader works with datatables. You need to add the files FixedHeader works with datatables. You need to add the files angular-datatables.fixedheader.min.js FixedHeader works with datatables. You need to add the files to your HTML. You also need to add the dependency to your HTML. You also need to add the dependency datatables.fixedheader` to your HTML. You also need to add the dependency到Angular應用程序中。 那么你的代碼將如下所示。

HTML

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border">
    <thead>
        <tr>
            <th>Name </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in items">
            <td>{{item.name}} </td>
        </tr>
    </tbody>
</table>

碼

var app = angular.module('app', ['datatables', 'datatables.fixedheader'])
app.controller("SampleController", function($scope, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
        .withPaginationType('full_numbers')
        .withDisplayLength(25)
        .withFixedHeader({
            bottom: true
        });
    $scope.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('Name').withTitle('Name'),
        DTColumnBuilder.newColumn('Address').withTitle('Address')
    ];
});

無需添加指令，因為在angular-datatables.fixedheader.min.js已經創建了指令（ 參考鏈接 ）

更新：

以下更改需要在代碼中完成。

1. 將FixedHeader js代碼和jquery代碼替換為new $.fn.dataTable.FixedHeader($element.find('#example'))
2. 調用將設置FixedHeader方法

調節器

(function(angular) {
    angular.module('showcase.angularWay', ['datatables'])
    .controller('AngularWayCtrl', AngularWayCtrl);

    function AngularWayCtrl($http, $element) {
        var vm = this;
        $http.get('data.json').then(function(res) {
            vm.persons = res.data;
            vm.setFixedHeader(); //call method to set glass.
        });

        vm.setFixedHeader = function(){
            //var table = $element.find('#example').DataTable();
            new $.fn.dataTable.FixedHeader($element.find('#example'))
        };
    }
})(angular);

您也可以將此代碼移動到指令，只需要刪除作為額外標頭附加的標題列。

我將此鏈接引用為上述更新的解決方案

工作Plunkr