javascript - Server-side Pagination using AngularJS and CodeIgniter -
i trying implement pagination using angularjs , codeigniter.
with current implementation, records have fetched once. want implement records can fetched 1 page @ time server during runtime. when user clicks on next page, data should fetched server , displayed.
here have done client-side pagination:
$scope.get_users = function() { $http.get("../admin/users/angular_all_users").success(function(data) { //$scope.allusers = data; /*-------------pagination 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 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 users-----------------*/ }
here 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 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 implement while keeping similar code structure? changes code need?
you can pass params query string:
$http.get("../admin/users/angular_all_users", {params: {page: 1, pagesize: 10}}).success(function(data)
then in codeigniter can params $_get['page']
, $_get['pagesize']
(or $this->input->get('page')
https://ellislab.com/codeigniter/user-guide/libraries/input.html)
Comments
Post a Comment