Smart Table with Server Side Pagination Using Angular 1.4

This is another smart-table tutorial, that has server-side pagination using angular 1.4. I am using a dummy rest API that needs one parameter which is page number, You can implement it with any data type source. I have already shared a tutorial of AngularJS Smart Table Listing with Demos and AngularJS Smart Table with Add, Edit and Delete Records.

I assumed You have read my previous tutorial and aware of angular 1.4.I also shared a tutorial about Add,Edit and Delete Example Using ng2-smart Table With Angular 4.

Add Server Side pagination with Smart Table and Angular

Created index.html and app.js file.The index.html file will have smart table html layout and app.js file has a controller. I will use reqres dummy rest api that sending below type response,

{
    "page": 2,
    "per_page": 3,
    "total": 12,
    "total_pages": 4,
    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
        }
    ]
}

We will use st-pipe directive to callback server side method and st-table for display records.

<table st-pipe="employee.callServer" st-table="employees" class="table table-striped">

<thead>

<tr>

<th>#</th>


<th>Profile</th>


<th width="100px">First Name</th>


<th>Last Name</th>


<th>Action</th>

</tr>

</thead>


<tbody ng-show="!employee.isLoading">

<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in employees track by $index">

<td>{{from+$index+1}}</td>


<td><img class="img-thumbnail img-responsive" alt="image" ng-src="{{row.avatar}}" style="width: 50px; height: 50px;"></td>


<td>{{row.first_name}}</td>


<td>{{row.last_name}}</td>


<td>
				<a type="button" class="btn btn-sm btn-info">
					<i class="glyphicon glyphicon-eye-open">
					</i>
				</a>
</td>

</tr>

</tbody>


<tfoot>

<tr>

<td colspan="5" class="text-center">

<div st-pagination="" st-items-by-page="3"></div>

</td>

</tr>

</tfoot>

</table>

As You can see, I have added smart-table directive with table and into pagination div. We will open app.js file and initialize all smart-table variables:

angular.module('TestApp.controllers', []).controller('testController',  ['$scope', '$http', function($scope, $http) {
$scope.employee = {};
$scope.employees = [];
$scope.employee.rp = 3;
$scope.employee.from = 0;
$scope.employee.isLoading = false;
$scope.initLoad = false;
}]);

We need to maintain smart table state using $timeout service.

angular.module('TestApp.controllers', []).controller('testController',  ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
$scope.employee = {};
$scope.employees = [];
$scope.employee.rp = 3;
$scope.employee.from = 0;
$scope.employee.isLoading = false;
$scope.initLoad = false;

$scope.init = function() {
		$timeout(function(){
			$scope.initLoad = true;
			var tableState = $scope.ctrl.tableState(); 
			console.log($scope.ctrl);
			$scope.employee.callServer(tableState, $scope.ctrl);
		}, 1000);
	}

	$scope.init();
	}]);

tableState() method returns the smart table state, we will get and pass to callback method to get data. We have used $scope.employee.callServer() method that takes tableState and current controller scope as a parameter. We will define callServer() method into app.js file.

$scope.employee.callServer = function callServer(tableState, ctrl) {

		if(!$scope.ctrl && ctrl){
			$scope.ctrl = ctrl;
		}

		if(!$scope.initLoad){
			return;
		}

      $scope.employee.isLoading = true;
      var pagination = tableState.pagination;

      var start = pagination.start || 0;     
      var number = pagination.number || $scope.employee.rp;

      $scope.employee.from = start; 

      var page  = Math.ceil(start/$scope.employee.rp) + 1;
      $scope.employees = [];


      $http.get("https://reqres.in/api/users?page="+page)
      .then(function(response){
      	angular.forEach(response.data.data, function(item, key){
      		$scope.employees.push(item);
      	});  
      	tableState.pagination.numberOfPages = response.data.total_pages;
      	tableState.pagination.totalItemCount = response.data.total;
      	tableState.pagination.start = start;
      	$scope.employee.tablestate = tableState;
			//$scope.loading = false;
			$scope.employee.isLoading = false;
			console.log($scope.employees);
		});
    }

We are initializing ctrl variable, if its not defined then we will load first time data. We have use GET http request and set into a employees variable. We have also updated tableState variable for smart table server-side pagination.