Fixed twbs#108: Add example of multiple tables

SumTotalSystems · Nov 16, 2013 · 158c6c6 · 158c6c6
1 parent 86b4f57
commit 158c6c6
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 2 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-table",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": [
     "ng-table.js",
     "ng-table.css"

diff --git a/examples/demo19.html b/examples/demo19.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+    <!--[if lt IE 9]>
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <![endif]-->
+    <script src="js/angular.min.js"></script>
+    <script src="../ng-table.src.js"></script>
+    <link rel="stylesheet" href="../ng-table.css">
+</head>
+<body ng-app="main">
+<h1>Multiple tables per page</h1>
+
+<div ng-controller="DemoCtrl">
+    <div class="row">
+        <div class="col col-sm-6">
+            <h2>Table #1</h2>
+            <p><strong>Filter:</strong> {{tableParams.filter()|json}}
+
+            <table ng-table="tableParams" show-filter="true" class="table">
+                <tr ng-repeat="user in $data">
+                    <td data-title="'Name'" filter="{ 'name': 'text' }">
+                        {{user.name}}
+                    </td>
+                    <td data-title="'Age'">
+                        {{user.age}}
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="col col-sm-6">
+            <h2>Table #2</h2>
+            <p><strong>Filter:</strong> {{tableParams2.filter()|json}}
+
+            <table ng-table="tableParams2" show-filter="true" class="table">
+                <tr ng-repeat="user in $data">
+                    <td data-title="'Name'" filter="{ 'name': 'text' }">
+                        {{user.name}}
+                    </td>
+                    <td data-title="'Age'">
+                        {{user.age}}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+
+
+    <script>
+        var app = angular.module('main', ['ngTable'])
+                .controller('DemoCtrl', function($scope, ngTableParams, $filter) {
+                    var data = [{name: "Moroni", age: 50},
+                        {name: "Tiancum", age: 43},
+                        {name: "Jacob", age: 27},
+                        {name: "Nephi", age: 29},
+                        {name: "Enos", age: 34},
+                        {name: "Tiancum", age: 43},
+                        {name: "Jacob", age: 27},
+                        {name: "Nephi", age: 29},
+                        {name: "Enos", age: 34},
+                        {name: "Tiancum", age: 43},
+                        {name: "Jacob", age: 27},
+                        {name: "Nephi", age: 29},
+                        {name: "Enos", age: 34},
+                        {name: "Tiancum", age: 43},
+                        {name: "Jacob", age: 27},
+                        {name: "Nephi", age: 29},
+                        {name: "Enos", age: 34}];
+
+                    // params for table #1
+                    $scope.tableParams = new ngTableParams({
+                        page: 1,            // show first page
+                        count: 10           // count per page
+                    }, {
+                        total: data.length, // length of data
+                        getData: function($defer, params) {
+                            // use build-in angular filter
+                            var orderedData = params.sorting() ?
+                                    $filter('orderBy')(data, params.orderBy()) :
+                                    data;
+                            orderedData = params.filter() ?
+                                    $filter('filter')(orderedData, params.filter()) :
+                                    orderedData;
+
+                            params.total(orderedData.length);
+                            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+                        }
+                    });
+
+                    // params for table #2
+                    $scope.tableParams2 = new ngTableParams({
+                        page: 1,            // show first page
+                        count: 10           // count per page
+                    }, {
+                        total: data.length, // length of data
+                        getData: function($defer, params) {
+                            // use build-in angular filter
+                            var orderedData = params.sorting() ?
+                                    $filter('orderBy')(data, params.orderBy()) :
+                                    data;
+                            orderedData = params.filter() ?
+                                    $filter('filter')(orderedData, params.filter()) :
+                                    orderedData;
+
+                            params.total(orderedData.length);
+                            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+                        }
+                    });
+                });
+    </script>
+
+</div>
+
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-table",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "author": "Vitalii Savchuk <[email protected]>",
   "license": "BSD",
   "repository": {