Pagination is a common feature in web applications that allows users to navigate through large sets of data. While client-side pagination can be suitable for small data sets, server-side pagination is more efficient for larger data sets as it only loads a subset of the data at a time. In this tutorial, we will guide you through the process of implementing server-side pagination in AngularJS.
Setting Up Your Environment
Before we begin, ensure that you have AngularJS installed on your machine. If not, you can download it from the official AngularJS website. We’ll also be using Node.js and Express for our server-side logic, so make sure you have those installed as well.
Creating the Server-Side Logic
First, we’ll create a simple Express server that returns paginated data. For simplicity, we’ll use an array of numbers as our data set. In a real-world application, this data would likely come from a database.
var express = require('express');
var app = express();
var data = Array.from({length: 100}, (_, i) => i + 1); // [1, 2, 3, ..., 100]
app.get('/data', function(req, res) {
var page = parseInt(req.query.page) || 1;
var pageSize = parseInt(req.query.pageSize) || 10;
var paginatedData = data.slice((page - 1) * pageSize, page * pageSize);
res.json({
data: paginatedData,
totalItems: data.length
});
});
app.listen(3000, function () {
console.log('Server listening on port 3000!');
});
In this code, we create an endpoint at /data that accepts page and pageSize query parameters. It uses these parameters to return a subset of the data.
Creating the AngularJS Application
Next, we’ll create an AngularJS application that fetches and displays the paginated data. We’ll use the $http service to make requests to our server.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div ng-repeat="item in data">
{{item}}
</div>
<button ng-disabled="page == 1" ng-click="fetchData(page - 1)">Previous</button>
<button ng-disabled="page == maxPage" ng-click="fetchData(page + 1)">Next</button>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.page = 1;
$scope.pageSize = 10;
$scope.fetchData = function(page) {
$http.get('/data', {params: {page: page, pageSize: $scope.pageSize}}).then(function(response) {
$scope.data = response.data.data;
$scope.page = page;
$scope.maxPage = Math.ceil(response.data.totalItems / $scope.pageSize);
});
};
$scope.fetchData($scope.page);
});
</script>
</body>
</html>
In this code, we create a controller that fetches the paginated data from the server and assigns it to the $scope.data variable. It also keeps track of the current page and the maximum page number. The “Previous” and “Next” buttons are used to navigate through the pages.
Conclusion
Server-side pagination is a powerful technique for handling large data sets in web applications. By only sending a subset of the data at a time, it reduces the amount of data that needs to be transferred and processed, leading to faster load times and a better user experience. With AngularJS and Node.js, implementing server-side pagination is a straightforward process. Happy coding!
