Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
HTML
<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://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', function ($scope, $window) {
$scope.Customers = [];
$scope.CustomersArray = [];
$scope.PageIndex = 1;
$scope.RecordCount = 0;
$scope.PageSize = 2; // Set Pagesize as per your need.
$scope.GetCustomers = function (index) {
var startIndex = (index * $scope.PageSize) - $scope.PageSize;
var endIndex = (index * $scope.PageSize) - 1;
$scope.Customers = [];
for (var i = startIndex; i <= endIndex; i++) {
if ($scope.CustomersArray[i] != undefined) {
$scope.Customers.push($scope.CustomersArray[i]);
}
}
$scope.RecordCount = $scope.CustomersArray.length;
}
$scope.Add = function () {
if ($scope.Country != undefined && $scope.Name != undefined) {
if ($scope.Name != '' || $scope.Country != '') {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
$scope.Customers.push(customer);
$scope.CustomersArray.push(customer);
//Clear the TextBoxes.
$scope.Name = "";
$scope.Country = "";
$scope.RecordCount = $scope.CustomersArray.length;
}
}
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-bordered table-hover table-striped">
<tr>
<th>Name</th>
<th>Country</th>
<th> </th>
</tr>
<tbody dir-paginate="m in Customers|itemsPerPage:PageSize" total-items="RecordCount">
<tr>
<td><input type="text" value="{{m.Name}}" class="form-control" /></td>
<td><input type="text" value="{{m.Country}}" class="form-control" /></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="Name" class="form-control" /></td>
<td><input type="text" ng-model="Country" class="form-control" /></td>
<td><input type="button" ng-click="Add()" value="Add" class="btn btn-success" /></td>
</tr>
</tfoot>
</table>
<dir-pagination-controls max-size="PageSize" direction-links="true" boundary-links="true"
on-page-change="GetCustomers(newPageNumber)">
</dir-pagination-controls>
</div>
</body>
</html>
Screenshot
