Last active
February 14, 2019 16:08
-
-
Save ebellinger/4399082 to your computer and use it in GitHub Desktop.
A dynamic datatable using AngularJS and Twitter Bootstrap
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en" ng-app> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>DataTable Test</title> | |
| <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet"> | |
| <style type="text/css"> | |
| .trOdd { | |
| background-color:#FFFFFF; | |
| } | |
| .trEven { | |
| background-color:#F0F0F0; | |
| } | |
| </style> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script> | |
| <script type="text/javascript"> | |
| function DatatableCtrl($scope) { | |
| $scope.headers = [ | |
| { "order": 1, "width": 0, "label": "ID", "data": "id", "type": "string", "visible": false }, | |
| { "order": 2, "width": 120, "label": "Last Name", "data": "lastName", "type": "string", "visible": true }, | |
| { "order": 3, "width": 129, "label": "First Name", "data": "firstName", "type": "string", "visible": true }, | |
| { "order": 4, "width": 200, "label": "Email Address", "data": "email", "type": "string", "visible": true }, | |
| { "order": 5, "width": 120, "label": "Phone Number", "data": "phoneNumber", "type": "string", "visible": true }, | |
| { "order": 6, "width": 80, "label": "Username", "data": "username", "type": "string", "visible": true }, | |
| { "order": 7, "width": 100, "label": "Last Login", "data": "lastLoginDate", "type": "date", "visible": true } | |
| ]; | |
| $scope.headerOrder = "order"; | |
| $scope.headerFilter = function(header) { | |
| return header.visible; | |
| }; | |
| $scope.users = [ | |
| { "id": "1", "lastName": "Test1", "firstName": "Test", "email": "[email protected]", "phoneNumber": "(555) 111-0001", "username": "ttest1", lastLoginDate: "12/28/2012 3:51 PM" }, | |
| { "id": "2", "lastName": "Test2", "firstName": "Test", "email": "[email protected]", "phoneNumber": "(555) 222-0002", "username": "ttest2", lastLoginDate: "12/28/2012 3:52 PM" }, | |
| { "id": "3", "lastName": "Test3", "firstName": "Test", "email": "[email protected]", "phoneNumber": "(555) 333-0003", "username": "ttest3", lastLoginDate: "12/28/2012 3:53 PM" }, | |
| { "id": "4", "lastName": "Test4", "firstName": "Test", "email": "[email protected]", "phoneNumber": "(555) 444-0004", "username": "ttest4", lastLoginDate: "12/28/2012 3:54 PM" }, | |
| { "id": "5", "lastName": "Test5", "firstName": "Test", "email": "[email protected]", "phoneNumber": "(555) 555-0005", "username": "ttest5", lastLoginDate: "12/28/2012 3:55 PM" } | |
| ]; | |
| $scope.rowDoubleClicked = function(user) { | |
| console.log("Username: " + user.username); | |
| }; | |
| $scope.counter = 0; | |
| $scope.userOrder = function(key) { | |
| console.log("key="+key);//prints: "key=undefined" | |
| angular.forEach($scope.headers, function(header){ | |
| if(header.data == key) | |
| { | |
| if(header.visible) { | |
| return header.order; | |
| } | |
| } | |
| }); | |
| return -1; | |
| }; | |
| } | |
| </script> | |
| </head> | |
| <body class="ng-cloak"> | |
| <!-- DATATABLE --> | |
| <div class="datatable" id="datatable" ng-controller="DatatableCtrl"> | |
| <table class="table table-striped table-condensed table-hover"> | |
| <thead> | |
| <tr> | |
| <th ng-repeat="header in headers | filter:headerFilter | orderBy:headerOrder" width="{{header.width}}">{{header.label}}</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="user in users" ng-class-odd="'trOdd'" ng-class-even="'trEven'" ng-dblclick="rowDoubleClicked(user)"> | |
| <td ng-repeat="(key,val) in user | orderBy:userOrder(key)">{{val}}</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| </tfoot> | |
| </table> | |
| </div> | |
| <!-- END DATATABLE --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It gives me this error:
Error: [orderBy:notarray] Expected array but received: {"id":"1","lastName":"Test1","firstName":"Test","email":"[email protected]","phoneNumber":"(555) 111-0001","username":"ttest1","lastLoginDate":"12/28/2012 3:51 PM"}
http://errors.angularjs.org/1.5.8/orderBy/notarray?p0=%7B%22id%22%3A%221%22%2C%22lastName%22%3A%22Test1%22%2C%22firstName%22%3A%22Test%22%2C%22email%22%3A%22test1%40example.com%22%2C%22phoneNumber%22%3A%22(555)%20111-0001%22%2C%22username%22%3A%22ttest1%22%2C%22lastLoginDate%22%3A%2212%2F28%2F2012%203%3A51%20PM%22%7D
at angular.js:68
at angular.js:21672
at fn (eval at compile (angular.js:14817), :4:499)
at regularInterceptedExpression (angular.js:16043)
at Scope.$digest (angular.js:17515)
at Scope.$apply (angular.js:17790)
at done (angular.js:11831)
at completeRequest (angular.js:12033)
at XMLHttpRequest.requestLoaded (angular.js:11966)