Update README.md

ziscloud · Sep 29, 2014 · 02aceee · 02aceee
1 parent 66e08dc
commit 02aceee
Showing 1 changed file with 108 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -12,33 +12,116 @@ bower install angular-footable
 
 Usage
 -----
-
+#### inject into angular
+```javascript
+angular
+    .module('angular-footable-example', [
+        'ui.footable'
+    ])
+```
+#### activate the plugin via directive
 ```html
-<div class="scroll-body" slimscroll="{slimscrollOption: value}">
-  Scroll Content
-</div>
+<table class="table footable">
 ```
-
-Options
--------
-* **noWatch** - Prevent directive from watching the option object
-* **width** - Width in pixels of the visible scroll area. Stretch-to-parent if not set. Default: none
-* **height** - Height in pixels of the visible scroll area. Also supports auto to set the height to same as parent container. Default: 250px
-* **size** - Width in pixels of the scrollbar. Default: 7px
-* **position** - left or right. Sets the position of the scrollbar. Default: right
-* **color** - Color in hex of the scrollbar. Default: #000000
-* **alwaysVisible** - Disables scrollbar hide. Default: false
-* **distance** - Distance in pixels from the edge of the parent element where scrollbar should appear. It is used together with position property. Default:1px
-* **start** - top or bottom or $(selector) - defines initial position of the scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll defaults to offsetTop of this element. Default: top.
-* **wheelStep** - Integer value for mouse wheel delta. Default: 20
-* **railVisible** - Enables scrollbar rail. Default: false
-* **railColor** - Sets scrollbar rail color, Default: #333333
-* **railOpacity** - Sets scrollbar rail opacity. Default: 0.2
-* **allowPageScroll** - Checks if mouse wheel should scroll page when bar reaches top or bottom of the container. When set to true is scrolls the page.Default: false
-* **scrollTo** - Jumps to the specified scroll value. Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollTo: '50px' });
-* **scrollBy** - Increases/decreases current scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollBy: '60px' });
-* **disableFadeOut** - Disables scrollbar auto fade. When set to true scrollbar doesn't disappear after some time when mouse is over the slimscroll div.Default: false
-* **touchScrollStep** - Allows to set different sensitivity for touch scroll events. Negative number inverts scroll direction.Default: 200
+#### 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
+  ```html
+  <script type="text/javascript" src="footable/js/footable.filter.js"></script>
+  ```
+  * configure in the table header
+  ```html
+  <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.sort.js
+  ```html
+  <script type="text/javascript" src="footable/js/footable.sort.js"></script>
+  ```
+  * basic filter
+  ```html
+  <input id="filter" type="text"/>
+  <table class="table footable" data-filter="#filter">
+  ```
+  * custom filter
+    * in the view
+    ```html
+    <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
+    ```javascript
+    .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 table is very easy, follow the demo page of footable is enough
+  * load foot.paginate.js into your app
+  ```html
+  <script type="text/javascript" src="footable/js/footable.paginate.js"></script>
+  ```
+  * configure the page size on the table element
+  ```html
+  <table class="table footable" data-page-size="5">
+  ```
+  * add the pagination bar in the table foot
+  ```html
+  <tfoot class="hide-if-no-paging">
+  <tr>
+    <td colspan="6" align="center">
+      <ul class="pagination"></ul>
+    </td>
+  </tr>
+  </tfoot>
+  ```
 
 License
 -------