current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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
share|improve this question
    
could you please upload your code or create fiddle with problem? –  pankajparkar Mar 13 at 16:48
    
Please provide a full code to clarify the exact issue. –  ProllyGeek Mar 14 at 23:45

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer
    
hi Pankaj. Have you tried this with datatable = "ng". Since you have written datatable =" " in your code that means it is jquery datatable. I need it to work using angular way –  Parth Doshi Mar 6 at 4:15
    
When I tried it. I get another clone of my header which is fixed. The normal table header is still there. –  Parth Doshi Mar 6 at 4:17
    
please read the update to my question. –  Parth Doshi Mar 6 at 6:46
3  
Here an example using the "Angular way". –  l-lin Mar 6 at 11:22
1  
yes it is working with your example. If any problems. I will let u know –  Parth Doshi Mar 15 at 11:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.