implementation of ng-table angularJS

Question

I want to implement ng-table for my project Spring and angular JS HTML5 but the problem when i add the ng-table nothing worked .

---App.JS----

    angular
  .module('TimeLeaveProject', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngTable'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'DemoCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

--Controller AngularJS ---

angular.module('TimeLeaveProject', ['ngTable'])
.controller('DemoCtrl', function($scope) {
    alert("demoCTRL"); 

    $http.get('/users/all').
    success(function(data) {
        $scope.users = data;
    });

})

---HTML Page--

<div ng-controller="DemoCtrl" style="margin-top: 10%;text-align: center;" class="jumbotron">



    <h2>Users</h2>
    <table ng-table class="table">

   <tr ng-repeat="user in users">
        <td data-title="'Name'">{{user.username}}</td>
        <td data-title="'Age'">{{user.password}}</td>
    </tr>



   </table>

and i add the local link for ng-table in my index.html page . The problem that i got nothing , all the views doesn't work .

score 0 · Answer 1 · answered Sep 16 '14 at 08:27

0

It seems you have forgotten to inject $http in your controller:

angular.module('TimeLeaveProject', ['ngTable'])
.controller('DemoCtrl', function($scope, $http) {
    alert("demoCTRL"); 

    $http.get('/users/all').
    success(function(data) {
        $scope.users = data;
    });

})

answered Sep 16 '14 at 08:27

Joao Leal

5,533
1
13
23

have you checked if the http.get.success is returning what you expect? – Joao Leal Sep 16 '14 at 08:42
yes i was working before with HTML 5 table and it's ok – YasBES Sep 16 '14 at 08:48
Can you compare to what I've done here, to see what's different http://plnkr.co/edit/hH4B9z8Lqy1LSX4d6eBf?p=preview – Joao Leal Sep 16 '14 at 09:01
the problem that in the javascript console they didn't show any error and also every other page didn't work so i think the problem is in app.js – YasBES Sep 16 '14 at 09:03
as i checked the problem is in the controller – YasBES Sep 16 '14 at 09:54

score 0 · Answer 2 · answered Sep 16 '14 at 08:54

0

Can you try declaring a default value for $scope.users, and then see if its coming up ? If yes , then the problem is that , your view is not getting updated when your http call returns data.

answered Sep 16 '14 at 08:54

user1537766

162
7

Are you sure , for reference , look here http://stackoverflow.com/questions/23325994/ng-table-not-working-for-dynamic-data . Can you add the code in plunker ? – user1537766 Sep 16 '14 at 09:02
can you give the link to plunker ? its easier to debug there – user1537766 Sep 16 '14 at 09:34

Goodzilla · Answer 3 · 2014-09-16T09:42:15.513

0

Did you declare your tableParams ?

If yes, make sure they are declared after you have received the data, like this :

$http.get('data.json').then(function (response) {
    var data = response.data
    $scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10 // count per page
    }, {
        total: data.length, // length of data
        getData: function ($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

});

Example plunker

edited Sep 16 '14 at 09:42

answered Sep 16 '14 at 09:37

Goodzilla

1,483
11
17

you can check this exemple that i did it without tableParams and it worked http://plnkr.co/edit/55nemp?p=streamer – YasBES Sep 16 '14 at 09:42
@PasstissiPhone So... Is your problem fixed ? I'd recommend using the tableParams btw, that'll give you access to sorting, filtering, grouping, pagination... – Goodzilla Sep 16 '14 at 09:45
i will use it thanks everyone the problem was fixed . – YasBES Sep 16 '14 at 10:00

score 0 · Accepted Answer · answered Sep 16 '14 at 10:01

Because i declared the ng-table in app.js so I shouldn't declared in the controller

angular.module('TimeLeaveProject')
.controller('DemoCtrl', function($scope) {
    alert("demoCTRL"); 

    $http.get('/users/all').
    success(function(data) {
        $scope.users = data;
    });

})

score 0 · Answer 5 · answered Dec 28 '14 at 11:01

0

Next time give a try to #ngTasty table pagination :)

http://zizzamia.com/ng-tasty/directive/table

answered Dec 28 '14 at 11:01

zizzamia

241
3
9

score 0 · Answer 6 · answered Jul 21 '17 at 17:53

Use ng-grid instead of ng-table.

It provides lot of functionalities like paging, filtering and row selection.

$scope.filterOptions = { filterText : "", useExternalFilter : true }; $scope.totalServerItems = 0; $scope.pagingOptions = { pageSizes : [ 5, 10, 20 ], pageSize : 10, currentPage : 1 }; $scope.setPagingData = function(data, page, pageSize) { var pagedData = data.slice((page - 1) * pageSize, page * pageSize); $scope.myData = pagedData; $scope.totalServerItems = data.length; if (!$scope.$$phase) { $scope.$apply(); } }; $scope.getPagedDataAsync = function(pageSize, page, searchText) { setTimeout(function() { var data; if (searchText) { var ft = searchText.toLowerCase(); $http.get('http://localhost:8080/getData').success( function(largeLoad) { data = largeLoad.filter(function(item) { return JSON.stringify(item).toLowerCase() .indexOf(ft) != -1; }); $scope.setPagingData(data, page, pageSize); }); } else { $http.get('http://localhost:8080/getData').success( function(largeLoad) { $scope.setPagingData(largeLoad, page, pageSize); }); } }, 100); };

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

$scope.$watch('pagingOptions', function(newVal, oldVal) { if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); } }, true); $scope.$watch('filterOptions', function(newVal, oldVal) { if (newVal !== oldVal) { $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); } }, true);

$scope.gridOptions = { data : 'myData', enablePaging : true, showFooter : true, multiSelect : false, totalServerItems : 'totalServerItems', pagingOptions : $scope.pagingOptions, filterOptions : $scope.filterOptions, selectedItems : [] };

implementation of ng-table angularJS

6 Answers6