# With the DataTables Fixed Header

The `angular-datatables` also provides an API in order to make the plugin `FixedHeader` work with datatables.

You need to add the file `angular-datatables.fixedheader.min.js` to your HTML file.

You also need to add the dependency `datatables.fixedheader` to your Angular app.

Beware when using routers. It seems that the header and footer stay in your DOM even when you change your application state. So you will need to tweak your code to remove them when exiting the state. Here some examples:

If you are using Angular ui-router, you can add an `onExit` callback like this:

$stateProvider.state("contacts", { templateUrl: 'somewhereInDaSpace', controller: function($scope, title){ // Do your stuff }, onEnter: function(title){ // Do your stuff }, onExit: function(){ // Remove the DataTables FixedHeader plugin's headers and footers var fixedHeaderEle = document.getElementsByClassName('fixedHeader'); angular.element(fixedHeaderEle).remove(); var fixedFooterEle = document.getElementsByClassName('fixedFooter'); angular.element(fixedFooterEle).remove(); } });
$scope.$on('$routeChangeStart', function(event, next, current) { var fixedHeaderEle = document.getElementsByClassName('fixedHeader'); angular.element(fixedHeaderEle).remove(); var fixedFooterEle = document.getElementsByClassName('fixedFooter'); angular.element(fixedFooterEle).remove(); });

ID | First name | Last name
--- | --- | ---

angular.module('showcase.withFixedHeader', ['datatables', 'datatables.fixedheader']) .controller('WithFixedHeaderCtrl', WithFixedHeaderCtrl); function WithFixedHeaderCtrl(DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withPaginationType('full_numbers') .withDisplayLength(25) .withFixedHeader({ bottom: true }); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name') ]; }

ID | First name | Last name
--- | --- | ---