Parth Doshi Parth Doshi - 7 months ago 293
Javascript Question

Fix header plugin not working in Angular datatables

I am using the stable build version Stable release v2.1.2 of the fixed header jquery plugin. I am trying to fix my table header. I have created the table using Angular datatables as mentioned over here.

In my controller class I have written the following code,

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

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

});


My HTML is as follows,

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


However when i run my application, i get the following error,


TypeError: Cannot read property 'childNodes' of undefined


I also tried using the following directive as I am aware that DOM manipulations should not be done in Controller but I get the following error.


TypeError: Cannot set property '_oPluginFixedHeader' of undefined


UPDATE:

my directive

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


Please can someone suggest a better solution?

I am using version 2.1.2 of dataTables.fixedHeader.js and my error comes in below line

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

dt._oPluginFixedHeader = this; //error over here

Answer

The angular-datatables also provides plugin to FixedHeader works with datatables. You need to add the filesangular-datatables.fixedheader.min.jsto your HTML. You also need to add the dependencydatatables.fixedheader` to your Angular app. then your code will look like below.

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>

CODE

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

No need of adding directive, because there is already directive created inside angular-datatables.fixedheader.min.js (Reference Link)

Update:

Below changes need to be done in code.

  1. Replace FixedHeader js code & jquery code to new $.fn.dataTable.FixedHeader($element.find('#example'))
  2. Call that method which will set FixedHeader

Controller

(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);

You can also move this code to directive, only you need to remove header column which is appended as extra header.

I referred this link for above updated solution

Working Plunkr

Comments