Angular JS serverside分頁：分頁控制器不會顯示

Question

我正在嘗試使用Angular js實現serverside分頁。 控制檯沒有顯示任何錯誤。

這是腳本：

$scope.get_users = function() { 
    $scope.tableParams = new ngTableParams({ 
     page: 1, 
     count: 5 
    }, { 
     getData: function ($defer, params) { 
      var start = (params.page() - 1) * params.count(); 
      var end = params.page() * params.count(); 
      $http.get('../admin/users/angular_all_users', { 
       params: { 
        pageNumber: params.page() - 1, 
        rangeStart: start, 
        rangeStop: end 
       } 
      }).success(function (data, status) { 
       var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; 
       params.total(orderedData.length); 
       $defer.resolve(orderedData.slice(start, end)); 
      }); 
     } 
    }); 
} 

這是我的看法：

Search: <input type="text" ng-model="query" />Page: {{tableParams.page()}} Count: {{tableParams.count()}} 
<table ng-table="tableParams" class="table table-striped table-bordered table-hover" id="table_all_users"> 
    <tbody ng-init="get_users()"> 
     <tr class="gradeX" ng-repeat="user in $data | filter:query"> 
      <td width="20%" data-title="'Select'"> 
       <input type="checkbox" name="list[]" class="chk_all" value="" id="" onclick="uncheck_select_all(this);" /> 
      </td> 
      <td width="35%" data-title="'User Name'" sortable="'username'">{{ user.username }}</td> 
      <td width="25%" data-title="'First Name'" sortable="'fname'">{{ user.fname }}</td> 
      <td width="25%" data-title="'Last Name'" sortable="'lname'">{{ user.lname }}</td> 
      <td width="15%" data-title="'Mobile'" sortable="'mobile'">{{ user.mobile }}</td> 
      <td width="15%" data-title="'Email'" sortable="'email'">{{ user.email }}</td> 
      <td width="15%" data-title="'Action'"><a title="Edit User" href="#/edit_user/{{user.user_id}}"><span class="fa fa-pencil"></span></a> | <a title="Delete User" id="" style="cursor:pointer;" ng-click="delete_user(user.user_id)"><span class="fa fa-trash-o"></span></a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

控制器功能：

public function users_count() { 
    $id = 1; 
    $users_count = $this - > vanesh_model - > get_users_count($id); 
    print json_encode($users_count); 
} 

public function angular_all_users() { 
    $pageNumber = $_GET['pageNumber']; 

    if (isset($_GET['rangeStop'])) { 
     $limit = $_GET['rangeStop']; 
    } else { 
     $limit = 10; 
    } 

    $pageNumber = 1; 
    $offset = ($pageNumber * $limit) - $limit; 

    $id = 1; 
    $data['all_users'] = $this - > vanesh_model - > get_all_users($id, $limit, $offset); 
    print json_encode($data['all_users']); 
} 

問題在哪裏？ 我懷疑我的控制器功能：angular_all_users（） 請建議任何解決方案。

Answer 1

來自鏈接：http://ng-table.com/#/demo/1-1 你應該在tableParams上設置一個你沒有設置的屬性。

在看看下面的代碼：

$scope.tableParams = new ngTableParams({ 
    page: 1,   // show first page 
    count: 10   // count per page 
}, { 

    //This is not set in your code 
    total: data.length, // length of data 

    getData: function ($defer, params) { 
     $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
    } 
})