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