Implement Table Paging (Pagination) using AngularJS in ASP.Net

Hi rani,

You can make use of Bootstrap.

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', ['ui.bootstrap']);
    app.controller("MyController", function ($scope, $http, $window) {
        $http.post("Default.aspx/GetEmployees", { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Employees = eval(response.data.d);
                $scope.curPage = 1;
                $scope.itemsPerPage = 3;
                $scope.maxSize = 5;
                $scope.numOfPages = function () {
                    return Math.ceil($scope.Employees.length / $scope.itemsPerPage);
                };
                $scope.$watch('curPage + numPerPage', function () {
                    var begin = (($scope.curPage - 1) * $scope.itemsPerPage),
                    end = begin + $scope.itemsPerPage;
                    $scope.PagerEmployees = $scope.Employees.slice(begin, end);
                });
            }, function error(response) {
                alert(response.responseText);
            });
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table class="table table-table-responsive">
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>City</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in PagerEmployees">
                <td>{{ employee.EmployeeId }}</td>
                <td>{{ employee.FirstName }}</td>
                <td>{{ employee.LastName }}</td>
                <td>{{ employee.City }}</td>
                <td>{{ employee.Country }}</td>
            </tr>
        </tbody>            
    </table>
    <div align="center" data-pagination="" data-num-pages="numOfPages()" data-current-page="curPage"
        data-max-size="maxSize" data-boundary-links="true">
    </div>
</div>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

Code

C#

[WebMethod]
public static string GetEmployees()
{
    List<object> employees = new List<object>();
    string sql = "SELECT * FROM Employees";
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
        {
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    employees.Add(new
                    {
                        EmployeeId = sdr["EmployeeID"],
                        FirstName = sdr["FirstName"],
                        LastName = sdr["LastName"],
                        City = sdr["City"],
                        Country = sdr["Country"]
                    });
                }
            }
            conn.Close();
        }
    }
 
    return (new JavaScriptSerializer().Serialize(employees));
}

VB.Net

<WebMethod()>
Public Shared Function GetEmployees() As String
    Dim employees As List(Of Object) = New List(Of Object)()
    Dim sql As String = "SELECT * FROM Employees"
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(sql)            
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    employees.Add(New With {
                        .EmployeeId = sdr("EmployeeID"),
                        .FirstName = sdr("FirstName"),
                        .LastName = sdr("LastName"),
                        .City = sdr("City"),
                        .Country = sdr("Country")
                    })
                End While
            End Using
 
            conn.Close()
        End Using
    End Using
 
    Return (New JavaScriptSerializer().Serialize(employees))
End Function

Screenshot