angular-footable

This is the directive to allow the use of JQuery footable plugin (http://fooplugins.com/plugins/footable-jquery/) in angular.

Installation

bower install angular-footable

Usage

inject into angular

angular.module('angular-footable-example',['ui.footable'])

activate the plugin via directive

<tableclass="table footable">

sorting

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

<scripttype="text/javascript" src="footable/js/footable.sort.js"></script>

• configure in the table header

<thead><tr><thdata-type="numeric" data-sort-initial="true">
ID
</th><th>
First Name
</th><thdata-sort-ignore="true">
Last Name
</th><thdata-hide="phone,tablet">
Job Title
</th><thdata-type="numeric" data-hide="phone,tablet">
DOB
</th><thdata-hide="phone">
Status
</th></tr></thead>

filtering data

• include footable.filter.js

<scripttype="text/javascript" src="footable/js/footable.filter.js"></script>

• basic filter

<inputid="filter" type="text"/><tableclass="table footable" data-filter="#filter">

• custom filter
  • in the view

  <selectclass="filter-status" ng-model='filter.status' ng-change="filterByStatus()"><option></option><optionvalue="active">Active</option><optionvalue="disabled">Disabled</option><optionvalue="suspended">Suspended</option></select><ahref="#clear" class="clear-filter" title="clear filter" ng-click="clearFilter()">[clear]</a><tableclass="table footable" data-before-filtering="filteringEventHandler">

  • in the controller

  .controller('exampleCtrl',function($scope){$scope.clearFilter=function(){$('.filter-status').val('');$('.footable').trigger('footable_clear_filter');};$scope.filteringEventHandler=function(e){varselected=$('.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};})

paginating

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

• load foot.paginate.js into your app

<scripttype="text/javascript" src="footable/js/footable.paginate.js"></script>

• configure the page size on the table element

<tableclass="table footable" data-page-size="5">

• add the pagination bar in the table foot

<tfootclass="hide-if-no-paging"><tr><tdcolspan="6" align="center"><ulclass="pagination"></ul></td></tr></tfoot>

License

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