Server Side Pagination Using AngularJS, Web API And SQL Server

Server side pagination is very useful when we are dealing with huge amounts of data. At that time client-side pagination will take a long time to get all the data at the same time, so it’s better to make a Server call on every page request.

We are going to see all employee data with pagination and we will make a Server call on every page request.

Also, we are going to use Web API for HTTP Service call and will use ADO.NET to access the data from the database. Our database will be SQL Server and we are using AngularJS and ui-bootstrap library to make UI ready.

Let’s start with a sample Application for better understanding. We are going to use Visual Studio 2015 for this example.

First, open the Visual Studio and click File -> New – > Project, as shown below.

Now, select ASP.NET Web Application and enter the name as ServerSidePaginationInAngularJsAndWebAPI and click OK, as shown below.

Now, select Empty from a template and check Web API from check box list and click OK, as shown below.

In the code given above, we are using getEmployeeList() Method and passing pageIndex and pageSizeSelected as a query string for getting all the employees information from the Web API.

Whenever a user will click any page number, the pageIndex value will change and it will call pageChanged() method and we are calling getEmployeeList() method from pageChanged() method.

Here, the users can also change the maximum number of items per page by using the drop-down. Whenever a user will change the drop-down value from the drop-down list, the changePageSize() Method will be called and inside the method, we are setting pageIndex = 1 and calling the getEmployeeList() method.

Output

Summary

In this article, we have covered the Server side pagination, using AngularJS, Web API and SQL Server. We also saw that we can change the maximum number of items per page from the drop-down.

Click here to download the attachment for the source code of the sample Application and the script files for the database operations from my GitHub Account.