I am currently working on integrating pagination using AngularJS and CodeIgniter.
The current implementation requires fetching all records at once. However, I aim to modify it so that the data can be retrieved one page at a time from the server during runtime. When the user navigates to the next page, the data should be fetched from the server and displayed accordingly.
As for client-side pagination, here is what I have accomplished:
$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)
{
// utilize built-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-----------------*/
}
Below 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 represents 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 enhance this while maintaining a similar code structure? What modifications do I need to implement?