Server-side Pagination using AngularJS and CodeIgniter

Question

I am trying to implement pagination using AngularJS and CodeIgniter.

With the current implementation, all records have to be fetched once. So what I want is to implement it so that the records can be fetched one page at a time from the server during runtime. When user clicks on the next page, the data should be fetched from the server and displayed.

Here what I have done as client-side pagination :

$scope.get_users = function()
{
    $http.get("../admin/users/angular_all_users").success(function(data)
    {
        //$scope.allUsers = data;
        /*-------------Pagination ALL USERS-----------------*/
        $scope.tableParams = new ngTableParams(
        {
            page: 1,
            count: 10,
            sorting:
            {
                username: 'asc' // initial sorting
            }
        },
        {
            total: data.length,
            getData: function($defer, params)
            {
                // use build-in angular filter for ordering
                var orderedData = params.sorting() ?
                    $filter('orderBy')(data, params.orderBy()) : data;

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

    });
    /*-------------Pagination ALL USERS-----------------*/
}

Here are the PHP 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()
    {
        $id=1;
        $data['all_users']=$this->vanesh_model->get_all_users($id);
        print json_encode($data['all_users']);
    }

This is my view:

<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>

How can I implement this while keeping a similar code structure? What changes to my code will I need?

Answer 1

You can simply pass the params as query string:

$http.get("../admin/users/angular_all_users", {params: {page: 1, pageSize: 10}}).success(function(data)

Then in Codeigniter you can get the params as $_GET['page'] and $_GET['pageSize'] (or $this->input->get('page') https://ellislab.com/codeigniter/user-guide/libraries/input.html )