Angular JS serverside Pagination: Pagination controllers are not going to display

Question

I am trying to implement serverside pagination using Angular js. Console is not showing any error.

This is the script:

$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));
            });
        }
    });
}

This is my View:

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>

Controller Functions:

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']);
}

Where is the problem? I doubt on my controller function : angular_all_users() Please suggest any solution.

Answer 1

From link: http://ng-table.com/#/demo/1-1 You should be setting a total property on tableParams which you are not setting.

Take a look at below code:

$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()));
    }
})