Hi rani,
Refering the below article i have created an example.
Check this example. Now please take its reference and correct your code.
Database
I am making use of Microsoft's Northwind Database. You can download it from here.
Download and install Northwind Database
SQL
CREATE PROCEDURE [dbo].[Customers_GetCustomersPageWise]
@PageIndex INT = 1,
@PageSize INT = 20,
@RecordCount INT OUTPUT
AS
BEGIN
SET NOCOUNT ON;
SELECT (ROW_NUMBER() OVER(Order By CustomerId)) AS RowNumber,
[CustomerID]
,[CompanyName]
,[ContactName]
,[ContactTitle]
,[Address]
,[City]
,[Region]
,[PostalCode]
,[Country]
,[Phone]
,[Fax]
INTO #Results
FROM [Customers]
SELECT @RecordCount = Count(*) FROM #Results
SELECT * FROM #Results WHERE
ROWNUMBER BETWEEN (@PageIndex-1)*@PageSize + 1 AND (((@PageIndex-1)*@PageSize + 1)+@PageSize)-1 OR @PageIndex = -1
DROP TABLE #Results
END
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination']);
app.controller('MyController', function ($scope, $http) {
$scope.Customers = [];
$scope.PageIndex = 1;
$scope.RecordCount = 0;
$scope.PageSize = 10;
$scope.GetCustomers = function (index) {
$scope.Customers = [];
$http.post("Default.aspx/GetCustomers", { PageNo: index, PageSize: $scope.PageSize }, { headers: { 'Content-Type': 'application/json'} })
.success(function (response) {
$scope.Customers = response.d.Customers;
$scope.RecordCount = response.d.TotalRecords;
});
}
$scope.GetCustomers($scope.PageIndex);
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="panel panel-primary">
<div class="panel-body">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="success">
<th>Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="customer in Customers|itemsPerPage:PageSize" total-items="RecordCount">
<td>{{customer.CustomerID}}</td>
<td>{{customer.ContactName}}</td>
<td>{{customer.City}}</td>
<td>{{customer.Country}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="PageSize" direction-links="true" boundary-links="true"
on-page-change="GetCustomers(newPageNumber)">
</dir-pagination-controls>
</div>
</div>
</body>
</html>
Namespaces
C#
using System.Collections.Generic;
using System.Data.Objects;
using System.Linq;
using System.Web.Services;
VB.Net
Imports System.Collections.Generic
Imports System.Data.Objects
Imports System.Linq
Imports System.Web.Services
Code
C#
[WebMethod]
public static CustomerData GetCustomers(int PageNo, int PageSize)
{
NorthwindEntities entities = new NorthwindEntities();
CustomerData customer = new CustomerData();
ObjectParameter recordCount = new ObjectParameter("RecordCount", typeof(int));
customer.Customers = entities.GetCustomerPager(PageNo, PageSize, recordCount).ToList();
customer.TotalRecords = Convert.ToInt32(entities.Customers.Count());
return customer;
}
public class CustomerData
{
public List<Customer> Customers { get; set; }
public int TotalRecords { get; set; }
}
VB.Net
<WebMethod()>
Public Shared Function GetCustomers(ByVal PageNo As Integer, ByVal PageSize As Integer) As CustomerData
Dim entities As NorthwindEntities = New NorthwindEntities()
Dim customer As CustomerData = New CustomerData()
Dim recordCount As ObjectParameter = New ObjectParameter("RecordCount", GetType(Integer))
customer.Customers = entities.GetCustomerPager(PageNo, PageSize, recordCount).ToList()
customer.TotalRecords = Convert.ToInt32(entities.Customers.Count())
Return customer
End Function
Public Class CustomerData
Public Property Customers As List(Of Customer)
Public Property TotalRecords As Integer
End Class
Screenshot
