Question

107

Fix header plugin not working in Angular datatables

rated 0 times [ 112] [ 5] / answers: 1 / hits: 7749 / 9 Years ago, thu, march 5, 2015, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaylynkarinam

Add To Favorites

Follow

Total Points: 740

Total Questions: 103

Total Answers: 103

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 9 Years ago brodyfrancisi · Accepted 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.

Replace FixedHeader js code & jquery code to new $.fn.dataTable.FixedHeader($element.find('#example'))

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