Hi mahesh213,
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
Model
public class CustomerModel
{
public List<Customer> Customers { get; set; }
public int TotalRecords { get; set; }
}
Namespaces
using System.Data.Objects;
using System.Linq;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetCustomers(int PageNo, int PageSize)
{
NorthwindEntities entities = new NorthwindEntities();
CustomerModel model = new CustomerModel();
ObjectParameter recordCount = new ObjectParameter("RecordCount", typeof(int));
model.Customers = entities.GetCustomersPageWise(PageNo, PageSize, recordCount).ToList();
model.TotalRecords = Convert.ToInt32(recordCount.Value);
return Json(model, JsonRequestBehavior.AllowGet);
}
}
View
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.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', ['$scope', '$http', '$window', function ($scope, $http, $window) {
$scope.Customers = [];
$scope.PageIndex = 1;
$scope.RecordCount = 0;
$scope.PageSize = 10;
$scope.GetCustomers = function (index) {
$scope.Customers = [];
$http.get("/Home/GetCustomers/", { params: { PageNo: index, PageSize: $scope.PageSize} })
.then(function (response) {
$scope.Customers = response.data.Customers;
$scope.RecordCount = response.data.TotalRecords;
}).then(function (response) {
});
};
$scope.GetCustomers($scope.PageIndex);
} ]);
</script>
</head>
<body ng-controller="MyController" ng-app="MyApp">
<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>
</body>
</html>
Screenshot
