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