The directive to allow the use of JQuery footable plugin
HTML JavaScript
Switch branches/tags
Clone or download
ziscloud Merge pull request #9 from alexrayan/master
Added function() wrapper for safety in concatenation and simplified the code
Latest commit ff85e5e May 11, 2016


This is the directive to allow the use of JQuery footable plugin ( in angular.


bower install angular-footable


inject into angular

    .module('angular-footable-example', [

activate the plugin via directive

<table class="table footable">


there is no new configuration add in this module, to enable sorting feature, you only need to follow the setup of the footable

  • include footable.sort.js in your app
<script type="text/javascript" src="footable/js/footable.sort.js"></script>
  • configure in the table header
      <th data-type="numeric" data-sort-initial="true">
          First Name
      <th data-sort-ignore="true">
          Last Name
      <th data-hide="phone,tablet">
          Job Title
      <th data-type="numeric" data-hide="phone,tablet">
      <th data-hide="phone">

filtering data

  • include footable.filter.js
<script type="text/javascript" src="footable/js/footable.filter.js"></script>
  • basic filter
<input id="filter" type="text"/>
<table class="table footable" data-filter="#filter">
  • custom filter
    • in the view
    <select class="filter-status" ng-model='filter.status' ng-change="filterByStatus()">
      <option value="active">Active</option>
      <option value="disabled">Disabled</option>
      <option value="suspended">Suspended</option>
    <a href="#clear" class="clear-filter" title="clear filter" ng-click="clearFilter()">[clear]</a>
    <table class="table footable" data-before-filtering="filteringEventHandler">
    • in the controller
    .controller('exampleCtrl', function($scope) {
          $scope.clearFilter = function() {
          $scope.filteringEventHandler = function(e) {
              var selected = $('.filter-status').find(':selected').text();
              if (selected && selected.length > 0) {
                  e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                  e.clear = !e.filter;
          $scope.filterByStatus = function() {
              $('.footable').trigger('footable_filter', {
                  filter: $('#filter').val()
          $scope.filter = {
              status: null


paginate table is very easy, follow the demo page of footable is enough

  • load foot.paginate.js into your app
<script type="text/javascript" src="footable/js/footable.paginate.js"></script>
  • configure the page size on the table element
<table class="table footable" data-page-size="5">
  • add the pagination bar in the table foot
<tfoot class="hide-if-no-paging">
<td colspan="6" align="center">
  <ul class="pagination"></ul>


angular-slimscroll is released under the MIT License. Feel free to use it in personal and commercial projects.