Giter Club home page Giter Club logo

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

alexrayan avatar ziscloud avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

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

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.

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

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

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.