Last active
October 29, 2017 07:42
-
-
Save esvit/6821108 to your computer and use it in GitHub Desktop.
ngTable Example #1: Table with pagination
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head lang="en"> | |
| <meta charset="utf-8"> | |
| <title>Getting Started With ngTable Example</title> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script> | |
| <script type="text/javascript" src="https://raw.github.com/esvit/ng-table/master/ng-table.js"></script> | |
| <link rel="stylesheet" type="text/css" href="https://raw.github.com/esvit/ng-table/master/ng-table.css" /> | |
| </head> | |
| <body> | |
| <div id="demo" ng-controller="MyCtrl"> | |
| <p><strong>Page:</strong> {{tableParams.page()}} | |
| <p><strong>Count per page:</strong> {{tableParams.count()}} | |
| <table ng-table="tableParams" class="table"> | |
| <tr ng-repeat="user in users"> | |
| <td data-title="'Name'"> | |
| {{user.name}} | |
| </td> | |
| <td data-title="'Age'"> | |
| {{user.age}} | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = angular.module('main', ['ngTable']); | |
| app.controller('MyCtrl', function($scope, ngTableParams) { | |
| 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}]; | |
| $scope.tableParams = new ngTableParams({ | |
| page: 1, // show first page | |
| count: 10 // count per page | |
| }, { | |
| total: data.length, // length of data | |
| getData: function($defer, params) { | |
| $scope.users = data.slice((params.page() - 1) * params.count(), params.page() * params.count()); | |
| $defer.resolve($scope.users); | |
| } | |
| }); | |
| }); | |
| angular.bootstrap(document.getElementById('demo'), [app.name]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
new ngTableParams should be new NgTableParams