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
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Paging Searching Sorting EntityFramework AngularJS</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" 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.SearchTerm = "";
$scope.SortColumn = "CustomerID";
$scope.ReverseSort = false;
$scope.SortDirection = "ASC";
$scope.GetCustomers = function (index) {
$scope.PageIndex = index;
$scope.Customers = [];
$http.post("CS.aspx/GetCustomers",
{
PageNo: $scope.PageIndex,
PageSize: $scope.PageSize,
searchTerm: $scope.SearchTerm,
sortDirection: $scope.SortDirection,
sortColumn: $scope.SortColumn
},
{ headers: { 'Content-Type': 'application/json'} })
.success(function (response) {
$scope.Customers = response.d.Customers;
$scope.RecordCount = response.d.TotalRecords;
});
}
$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 '';
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="panel panel-primary">
<div class="panel-body">
<input type="text" ng-model="SearchTerm" ng-keyup="GetCustomers(1)" class="form-control" placeholder="Enter Name" />
<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>
</div>
</div>
</body>
</html>
Code
C#
[System.Web.Services.WebMethod]
public static CustomerData 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.ContactName.StartsWith(searchTerm)).ToList();
}
else
{
customers = entities.Customers.ToList();
}
switch (sortColumn)
{
case "":
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;
}
CustomerData model = new CustomerData();
model.Customers = customers.Skip((PageNo - 1) * PageSize).Take(PageSize).ToList();
model.TotalRecords = customers.Count();
return model;
}
public class CustomerData
{
public List<Customer> Customers { get; set; }
public int TotalRecords { get; set; }
}
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCustomers(ByVal PageNo As Integer, ByVal PageSize As Integer, ByVal searchTerm As String, ByVal sortDirection As String, ByVal sortColumn As String) As CustomerData
Dim entities As NorthwindEntities = New NorthwindEntities()
Dim customers As List(Of Customer) = New List(Of Customer)()
If Not String.IsNullOrEmpty(searchTerm) Then
customers = entities.Customers.Where(Function(x) x.ContactName.StartsWith(searchTerm)).ToList()
Else
customers = entities.Customers.ToList()
End If
Select Case sortColumn
Case "", "CustomerID"
If sortDirection = "ASC" Then
customers = customers.OrderBy(Function(x) x.CustomerID).ToList()
Else
customers = customers.OrderByDescending(Function(x) x.CustomerID).ToList()
End If
Case "ContactName"
If sortDirection = "ASC" Then
customers = customers.OrderBy(Function(x) x.ContactName).ToList()
Else
customers = customers.OrderByDescending(Function(x) x.ContactName).ToList()
End If
Case "City"
If sortDirection = "ASC" Then
customers = customers.OrderBy(Function(x) x.City).ToList()
Else
customers = customers.OrderByDescending(Function(x) x.City).ToList()
End If
Case "Country"
If sortDirection = "ASC" Then
customers = customers.OrderBy(Function(x) x.Country).ToList()
Else
customers = customers.OrderByDescending(Function(x) x.Country).ToList()
End If
End Select
Dim model As CustomerData = New CustomerData()
model.Customers = customers.Skip((PageNo - 1) * PageSize).Take(PageSize).ToList()
model.TotalRecords = customers.Count()
Return model
End Function
Public Class CustomerData
Public Property Customers As List(Of Customer)
Public Property TotalRecords As Integer
End Class
Screenshot
