Hi rani,
Using the below link i have modified the code.
HTML
Default
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Searching Sorting and Paging in 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.6.1/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" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js"></script>
<script type="text/javascript" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination', 'ui.bootstrap']);
app.controller('MyController', function ($scope, $uibModal, $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 = [];
var data = {
searchTerm: $scope.SearchTerm,
pageNo: $scope.PageIndex,
pageSize: $scope.PageSize,
sortDirection: $scope.SortDirection,
sortColumn: $scope.SortColumn
};
$http.post("Default.aspx/GetCustomers", data, { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
$scope.Customers = response.data.d.Customers;
$scope.RecordCount = response.data.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 '';
}
$scope.GetDetails = function (customer) {
$scope.modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'popup.htm',
controller: 'ModelHandlerController',
controllerAs: '$ctrl',
size: 'sm', // sm-small // md-medium // lg-large
resolve: {
Customer: function () {
return customer;
}
}
});
}
});
app.controller("ModelHandlerController", function ($scope, $uibModalInstance, Customer) {
$scope.Customer = Customer;
$scope.Cancel = function () {
$uibModalInstance.dismiss('close');
}
});
</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')">
</th>
<th ng-click="SortData('ContactName')">
Name <div ng-class="GetSortClass('ContactName')">
</th>
<th ng-click="SortData('City')">
City <div ng-class="GetSortClass('City')">
</th>
<th ng-click="SortData('Country')">
Country <div ng-class="GetSortClass('Country')">
</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="customer in Customers|itemsPerPage:PageSize" total-items="RecordCount">
<td>{{customer.Id}}</td>
<td>{{customer.Name}}</td>
<td>{{customer.City}}</td>
<td>{{customer.Country}}</td>
<td><input type="button" value="View Details" ng-click="GetDetails(customer)" class="btn btn-primary" /></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>
Popup.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="modal-header">
<h3 class="modal-title text-center"><u>{{Customer.Name.trim()}}</u> details</h3>
</div>
<div class="modal-body" align="center">
<span><b>Id : </b></span>{{Customer.Id}}<br />
<span><b>City : </b></span>{{Customer.City}}<br />
<span><b>Country : </b></span>{{Customer.Country}}<br />
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="Cancel()">Cancel</button>
</div>
</body>
</html>
Namespaces
C#
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
VB.Net
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Code
C#
[WebMethod]
public static CustomerData GetCustomers(string searchTerm, int pageNo, int pageSize, string sortDirection, string sortColumn)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
List<object> customers = new List<object>();
SqlConnection con = new SqlConnection(strConnString);
SqlCommand cmd = new SqlCommand("GetCustomersPageWise_Sort", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@SearchTerm", searchTerm);
cmd.Parameters.AddWithValue("@PageIndex", pageNo);
cmd.Parameters.AddWithValue("@PageSize", pageSize);
cmd.Parameters.AddWithValue("@SortDirection", sortDirection);
cmd.Parameters.AddWithValue("@SortColumn", sortColumn);
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
customers.Add(new
{
Id = sdr["CustomerID"],
Name = sdr["ContactName"],
City = sdr["City"],
Country = sdr["Country"]
});
}
con.Close();
CustomerData tableData = new CustomerData();
tableData.Customers = customers;
tableData.TotalRecords = Convert.ToInt32(cmd.Parameters["@RecordCount"].Value);
return tableData;
}
public class CustomerData
{
public List<object> Customers { get; set; }
public int TotalRecords { get; set; }
}
VB.Net
<WebMethod()>
Public Shared Function GetCustomers(ByVal searchTerm As String, ByVal pageNo As Integer, ByVal pageSize As Integer, ByVal sortDirection As String, ByVal sortColumn As String) As CustomerData
Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim customers As List(Of Object) = New List(Of Object)()
Dim con As SqlConnection = New SqlConnection(strConnString)
Dim cmd As SqlCommand = New SqlCommand("GetCustomersPageWise_Sort", con)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@SearchTerm", searchTerm)
cmd.Parameters.AddWithValue("@PageIndex", pageNo)
cmd.Parameters.AddWithValue("@PageSize", pageSize)
cmd.Parameters.AddWithValue("@SortDirection", sortDirection)
cmd.Parameters.AddWithValue("@SortColumn", sortColumn)
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New With {
.Id = sdr("CustomerID"),
.Name = sdr("ContactName"),
.City = sdr("City"),
.Country = sdr("Country")
})
End While
con.Close()
Dim tableData As CustomerData = New CustomerData()
tableData.Customers = customers
tableData.TotalRecords = Convert.ToInt32(cmd.Parameters("@RecordCount").Value)
Return tableData
End Function
Public Class CustomerData
Public Property Customers As List(Of Object)
Public Property TotalRecords As Integer
End Class
Screenshot
