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.

For example, 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(); } });
ID First name Last name
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') ]; }