使用 AngularJS 和 CodeIgniter 的服务器端分页

Question

我正在尝试使用 AngularJS 和 CodeIgniter 实现 分页。

在当前的实现中，所有记录都必须获取一次。所以我想要实现它，以便在运行时从服务器一次获取一页记录。当用户点击下一页时，应从服务器获取数据并显示。

这是我作为客户端分页所做的：

$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-----------------*/
}

以下是 PHP 控制器函数：

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

这是我的看法：

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

如何在保持类似代码结构的同时实现这一点？我需要对我的代码进行哪些更改？

Answer 1

您可以简单地将参数作为查询字符串传递：

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

然后在 Codeigniter 中，您可以获得 $_GET['page'] 和 $_GET['pageSize']（或 $this->input->get('page') https://ellislab.com/codeigniter/user-guide/libraries/input.html）的参数