Hi mahesh213,
With dirPagination directive it is not possible to load only those record having the pagenumber.
Refering the below article i have created an example.
Check this example. Now please take its reference and correct your code.
For paging i have used ASPSnippets_Pager.
You can download the js from the sample provided in the link.
Database
I am making use of Microsoft's Northwind Database. You can download it from here.
Download and install Northwind Database
Namespaces
using System.Data.Objects;
using System.Linq;
Model
public class CustomerModel
{
public List<Customer> Customers { get; set; }
public int PageIndex { get; set; }
public int PageSize { get; set; }
public int RecordCount { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult PopulateCustomers(int pageIndex)
{
NorthwindEntities entities = new NorthwindEntities();
CustomerModel model = new CustomerModel();
model.PageIndex = pageIndex;
model.PageSize = 10;
ObjectParameter recordCount = new ObjectParameter("RecordCount", typeof(int));
model.Customers = entities.GetCustomers(model.PageIndex, model.PageSize, recordCount).ToList();
model.RecordCount = Convert.ToInt32(recordCount.Value);
return Json(model, JsonRequestBehavior.AllowGet);
}
}
View
<html>
<head>
<title>Index</title>
<style type="text/css">
.Pager span
{
text-align: center;
color: #333;
display: inline-block;
width: 20px;
background-color: #B8DBFD;
margin-right: 3px;
line-height: 150%;
border: 1px solid #B8DBFD;
border-radius: 5px;
}
.Pager a
{
text-align: center;
display: inline-block;
width: 20px;
background-color: #ccc;
color: #333;
border: 1px solid #ccc;
margin-right: 3px;
line-height: 150%;
text-decoration: none;
border-radius: 5px;
}
</style>
<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 src="../../ASPSnippets_Pager.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', '$http', '$window', 'RegistrationService', function ($scope, $http, $window, RegistrationService) {
PopulateCustomers(1);
$("body").on("click", ".Pager .page", function () {
PopulateCustomers(parseInt($(this).attr('page')));
});
function PopulateCustomers(Index) {
var getData = RegistrationService.GetCustomers(Index);
getData.then(function (response) {
$scope.Customers = response.data.Customers;
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: response.data.PageIndex,
PageSize: response.data.PageSize,
RecordCount: response.data.RecordCount
});
}, function (response) {
});
}
} ]);
app.service("RegistrationService", function ($http) {
this.GetCustomers = function (index) {
var response = $http({
method: "POST",
url: "/Home/PopulateCustomers",
params: { pageIndex: index }
});
return response;
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<table id="tblCustomers" cellpadding="0" cellspacing="0">
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.CustomerID}}</td>
<td>{{m.ContactName}}</td>
<td>{{m.City}}</td>
<td>{{m.Country}}</td>
</tr>
</tbody>
</table>
<br />
<div class="Pager">
</div>
</body>
</html>
Screenshot
