Hi mahesh213,
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
Model
public class CustomerModel
{
public List<Customer> Customers { get; set; }
public int TotalRecords { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetCountries()
{
NorthwindEntities entities = new NorthwindEntities();
List<SelectListItem> countries = entities.Customers.Where(x => x.Country != null)
.Select(x => new SelectListItem
{
Text = x.Country,
Value = x.Country
}).Distinct().ToList();
return Json(countries, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCustomers(int PageNo, int PageSize, string searchTerm, string sortDirection, string sortColumn)
{
NorthwindEntities entities = new NorthwindEntities();
List<Customer> customers = new List<Customer>();
if (!string.IsNullOrEmpty(searchTerm))
{
customers = entities.Customers.Where(x => x.Country.Equals(searchTerm)).ToList();
}
else
{
customers = entities.Customers.ToList();
}
switch (sortColumn)
{
case "CustomerID":
if (sortDirection == "ASC")
{
customers = customers.OrderBy(x => x.CustomerID).ToList();
}
else
{
customers = customers.OrderByDescending(x => x.CustomerID).ToList();
}
break;
case "ContactName":
if (sortDirection == "ASC")
{
customers = customers.OrderBy(x => x.ContactName).ToList();
}
else
{
customers = customers.OrderByDescending(x => x.ContactName).ToList();
}
break;
case "City":
if (sortDirection == "ASC")
{
customers = customers.OrderBy(x => x.City).ToList();
}
else
{
customers = customers.OrderByDescending(x => x.City).ToList();
}
break;
case "Country":
if (sortDirection == "ASC")
{
customers = customers.OrderBy(x => x.Country).ToList();
}
else
{
customers = customers.OrderByDescending(x => x.Country).ToList();
}
break;
}
CustomerModel model = new CustomerModel();
model.Customers = customers.Skip((PageNo - 1) * PageSize).Take(PageSize).ToList();
model.TotalRecords = customers.Count(); ;
return Json(model, JsonRequestBehavior.AllowGet);
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<style type="text/css">
/*Displays UP arrow*/
.arrow-up
{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
/*Displays DOWN arrow*/
.arrow-down
{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid black;
display: inline-block;
}
</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://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) {
$http({ method: 'Get', url: '/Home/GetCountries/' })
.success(function (response) {
$scope.Countries = response;
});
$scope.Customers = [];
$scope.PageIndex = 1;
$scope.RecordCount = 0;
$scope.PageSize = 5;
$scope.SearchTerm = "";
$scope.SortColumn = "CustomerID";
$scope.ReverseSort = false;
$scope.SortDirection = "ASC";
$scope.GetCustomers = function (index) {
PopulateCustomer(index);
}
function PopulateCustomer(index) {
$scope.PageIndex = index;
$scope.Customers = [];
$http.get("/Home/GetCustomers/", {
params:
{
PageNo: $scope.PageIndex,
PageSize: $scope.PageSize,
searchTerm: $scope.searchTerm,
sortDirection: $scope.SortDirection,
sortColumn: $scope.SortColumn
}
}).then(function (response) {
$scope.Customers = response.data.Customers;
$scope.RecordCount = response.data.TotalRecords;
}).then(function (response) { });
}
$scope.GetCustomers($scope.PageIndex);
$scope.SortData = function (column) {
$scope.ReverseSort = ($scope.SortColumn == column) ? !$scope.ReverseSort : false;
$scope.SortDirection = $scope.ReverseSort ? "DESC" : "ASC";
$scope.SortColumn = column;
$scope.GetCustomers($scope.PageIndex);
}
$scope.GetSortClass = function (column) {
if ($scope.SortColumn == column) {
return $scope.ReverseSort ? 'arrow-down' : 'arrow-up';
}
return '';
}
$scope.Search = function () {
$scope.GetCustomers($scope.PageIndex);
}
} ]);
</script>
</head>
<body ng-controller="MyController" ng-app="MyApp">
<select ng-model="searchTerm" class="form-control" ng-options="c.Value as c.Text for c in Countries">
<option value="">-- Select Country --</option>
</select>
<input type="button" ng-click="Search()" value="Search" class="btn btn-primary btn-sm" />
<br />
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="success">
<th ng-click="SortData('CustomerID')">
Id <div ng-class="GetSortClass('CustomerID')"></div>
</th>
<th ng-click="SortData('ContactName')">
Name <div ng-class="GetSortClass('ContactName')"></div>
</th>
<th ng-click="SortData('City')">
City <div ng-class="GetSortClass('City')"></div>
</th>
<th ng-click="SortData('Country')">
Country <div ng-class="GetSortClass('Country')"></div>
</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
