Search code examples
angularjsngtable

How to configure Ajax Call with ngTable


I am trying to get the code correct, I used ngTable a long time ago and I forgot how I got it to work. The Json is returning fine. But Nothing is going through ngTable.

var data = CustomerGet.query().then(function (data) {
    $scope.customerArray = data;
}, function (reason) {
    errorMngrSvc.handleError(reason);
});

//Customer Employee Table
$scope.tableParams = new ngTableParams({

    count: data.length // hides pager
}, {
    counts: [], // hides page sizes
    groupBy: 'role',
    total: data.length,
    getData: function ($defer, params) {
        var orderedData = params.sorting() ?
                $filter('orderBy')(data, $scope.tableParams.orderBy()) :
                data;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

View

<table ng-table="tableParams" class="table">
 <tbody ng-repeat="group in $groups">
   <tr class="ng-table-group">
      <td colspan="{{$columns.length}}">
      <a href="" ng-click="group.$hideRows = !group.$hideRows">
      <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
     <strong>{{ group.value }}</strong>
     </a>
     </td>
  </tr>
  <tr ng-hide="group.$hideRows" ng-repeat="user in group.data">
  <td sortable="name" data-title="'Name'">
                                                        {{user.CustomerEmployees.CustomerEmployeeFirstName}}
    </tr>
    </tbody>
     </table>

UPDATE

  CustomerEmployeeGet.query()
     .success(function (data, status) {
         $scope.customerArray = data;

       $scope.tableParams = new ngTableParams({
           count: customerArray.length // hides pager
     }, {
          counts: [], // hides page sizes
          groupBy: 'Role',
          total: customerArray.length,
          getData: function ($defer, params) {
             var orderedData = params.sorting() ?
                   $filter('orderBy')(customerArray, $scope.tableParams.orderBy()) :
                   customerArray;;

          $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
     });
 });

I am making some progress. Error

TypeError: undefined is not a function and that is at the .success line


Solution

  • I skipped my http factory and did everything from the controller

    //Get CustomerEmployees
    $http.get('/api/apiCustomerEmployee')
         .success(function (data, status) {
            $scope.tableParams = new ngTableParams({
               count: data.length // hides pager
         }, {
              counts: [], // hides page sizes
              groupBy: 'Role',
              total: data.length,
              getData: function ($defer, params) {
                 var orderedData = params.sorting() ?
                       $filter('orderBy')(data, $scope.tableParams.orderBy()) :
                       data;;
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
         });
     });