angular-footable

WebJar for angular-footable

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-footable
Last Version	1.0.3
Release Date	Aug 3, 2015
Type	jar
Description	angular-footable WebJar for angular-footable
Project URL	http://webjars.org
Source Code Management	https://github.com/ziscloud/angular-footable

Download angular-footable

Filename	Size
angular-footable-1.0.3.pom
angular-footable-1.0.3.jar	15 KB
angular-footable-1.0.3-sources.jar	22 bytes
angular-footable-1.0.3-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-footable/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-footable</artifactId>
    <version>1.0.3</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-footable/
implementation 'org.webjars.bower:angular-footable:1.0.3'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-footable/
implementation ("org.webjars.bower:angular-footable:1.0.3")

Apache Buildr

'org.webjars.bower:angular-footable:jar:1.0.3'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-footable" rev="1.0.3">
  <artifact name="angular-footable" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-footable', version='1.0.3')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-footable" % "1.0.3"

Leiningen

[org.webjars.bower/angular-footable "1.0.3"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1,2)
org.webjars.bower : footable	jar	[2.0.0,2.1)

Project Modules

There are no modules declared in this project.

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

<table class="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

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

• configure in the table header

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

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></option>
    <option value="active">Active</option>
    <option value="disabled">Disabled</option>
    <option value="suspended">Suspended</option>
  </select>
  <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() {
            $('.filter-status').val('');
            $('.footable').trigger('footable_clear_filter');
        };
  
        $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
        };
    })

paginating

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">
<tr>
<td colspan="6" align="center">
  <ul class="pagination"></ul>
</td>
</tr>
</tfoot>

License

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

Versions

Version
1.0.3 Aug 3, 2015