ziscloud / angular-footable Goto Github PK

The directive to allow the use of JQuery footable plugin

License: MIT License

JavaScript 32.07% HTML 67.93%

angular-footable's Introduction

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.

angular-footable's People

Contributors

Stargazers

Watchers

angular-footable's Issues

Data-Hide and over 800 rows

Heys guys, first, I will thank you for this great angular control!
At the moment I'm evaluating some table-controls for my application and I stepped over your control, which is very handy.

I got it working with Angular and data from my api, which returns over 800 rows.
If I use data-hide="phone,tablet" to get it responsive, the loadtime will be ver high on my local system (around 5-10 seconds).

Is there any way to only render the rows which are shown and not paginated?
I use ng-repeat to build up the table. Or better, to get the data from the server (sorting and so on will be done at the server side).

Pagination not working

Hey,

I've added the footable plugin. The basics work including sortable.
However, pagination isn't working. When I load the page, pagination is not added. After I click one of the sortable-columns, the order changes, and the pagination is added including the pagination-box (with page-numbers).

How's this possible? Am I the only one here?

Greetz

Filter by specific column?

Does angular-footable have a feature to only filter the table by specific fields?

data-hide is not working when it is used with ng-repeat in <th> element

When i use data-hide along with ng-repeat in element as below, it is not hiding the columns for mobile and tablet screen size.
<th data-toggle="true"></th>
<th data-hide="phone, tablet" ng-repeat="period in vm.periods | limitTo : 8 : 0">{{period}}</th>
<th ng-repeat="lastperiod in vm.periods | limitTo : 1 : 8">{{lastperiod}}</th>
My intention is here to fetch the column names from REST service and use it along with data-hide for few of them. However i noticed that all columns are appearing irrespective of the screen size.

footable is not working in angular js

Hi
Thank for this awesome plugin.

I am new to angular js. I am trying to us it but it is not working in angular js but working in jquery version.
it work in angular js like this : dafinley.github.io/FooTable/

I want to use hide column in my page

please tell me how to do it in angular js.

Uncaught TypeError: angular.module(...).info is not a function at angular-footable.js:58 at angular-footable.js:58

Hello Everyone,
Hope you are doing well....
I am getting this issue when i deployed build on server. I have checked all the scripts are available in the build.
The most surprising thing is that, it is working fine on my local environment.
please help me out if any one have idea about the same.

Angular 1.3 support

I'm trying bower install --save angular-footable and am using Angular ~1.3.14. Here's the output I'm getting:

bower angular-footable#*        cached git://github.com/ziscloud/angular-footable.git#1.0.1
bower angular-footable#*      validate 1.0.1 against git://github.com/ziscloud/angular-footable.git#*
bower angular#~1.2              cached git://github.com/angular/bower-angular.git#1.2.28
bower angular#~1.2            validate 1.2.28 against git://github.com/angular/bower-angular.git#~1.2
bower angular#1.3.14            cached git://github.com/angular/bower-angular.git#1.3.14
bower angular#1.3.14          validate 1.3.14 against git://github.com/angular/bower-angular.git#1.3.14
bower                        ECONFLICT Unable to find suitable version for angular

Release for FooTables V3

Hi!

I was wondering if there will be a release which will work with V3 of footables?
https://github.com/fooplugins/FooTable

Thank you very much!

Binding/evaluating data-page-size bug

It`s impossible to bind or evaluate some value in data-page-size attribute.
For example

<table class="table footable" data-filter="#filter" 
data-before-filtering="filteringEventHandler" data-page-size="{{2 + 2}}"></table>

will not work.
Any ideas?

Should it work with ng-repeat?

My table data is populated with ng-repeat and it doesn't work. If I hardcode the data rows, it will work. Not sure if this is a bug, just asking what the intention is.

Custom Breakpoints

Hi,
Firstly, thank you for providing this, it works great! This really isn't an "issue", more of my not being familiar with using plugins with AngularJS. When using angular-footable how would I specify custom breakpoints within the directive?

example:
breakpoints: {medium: 1160}

Thanks in advance.

Ken

How to update values of the table when the $scope changes?

The problem is described here: http://stackoverflow.com/questions/37423880/how-to-update-angular-footable-values-when-rest-calls-are-made

Sort doesn't work if ng-repeat is used for populating the header <th>

The sorting by clicking the header and toggle-arrow-tiny works nicely normally but doesn't work well when I use ng-repeat like this shown below. I still get the headers with correct text but no sorting or the toggle icons on the headers.

<th ng-repeat="curr_header in headers">{{curr_header}}</th>

Can you please help ?

Not working if changing abstract root state

If I change from a base abstract state say "auth" to "main", Footable stops working. If I'm on the same abstract state it continues to work. Like going from main.list2 to main.list1. If I switch from auth.login to main.list1 footable doesn't work only if I refresh the page.

Sorter icon dissapears

Hey,

First of all many thanks for this great improvement, it works like a charm!

Second, and this isn't really an issue but rather a question, and that is when I add the "footable" class to my tables, for some reason the sort icons don't get added to the columns. I can still sort them, but as mentioned the icons aren't there. Maybe it's just me that is missing something?!

Thanks in advance!

Update: I also noticed that the values of the 'th' don't get inserted either on mobile/tablet.

hidden column and translate directive issue

If the column headers using translate, the hidden columns Does not reveal the column label, instead code like {{ 'NAME' | translate }}: ABCD is displayed instead of Name: ABCD when expanded.