Basically there is a grid on page load user can filer based on certain criteria.I want to show server side pagination on this grid.Please help me to so..
//The Module Declaration
var app = angular.module('ngmodule', []);
//Declaring Service
app.service('ngservice', function ($http) {
//The function to read all Orders
this.getOrders = function () {
var res = $http.get("/Orders");;
return res;
};
//The function to read Orders based on filter and its value
//The function reads all records if value is not entered
//Else based on the filter and its value, the Orders will be returned
this.getfilteredData = function (filter, value) {
var res;
if (value.length == 0) {
res = $http.get("/Orders");
return res;
} else {
res = $http.get("/Orders/" + filter + "/" + value);
return res;
}
};
});
//Declaring the Controller
app.controller('ngcontroller', function ($scope, ngservice) {
$scope.Selectors = ["CustomerName", "SalesAgentName", "MobileNo"];
$scope.SelectedCriteria = ""; //The Object used for selecting value from <option>
$scope.filterValue = ""; //The object used to read value entered into textbox for filtering information from table
// pagination
$scope.curPage = 0;
$scope.pageSize = 5;
loadOrders();
//Function to Load all Orders
function loadOrders() {
var promise = ngservice.getOrders();
promise.then(function (resp) {
$scope.Orders = resp.data;
$scope.Message = "Call is Completed Successfully";
}, function (err) {
$scope.Message = "Call Failed " + err.status;
});
};
//Function to Load orders based on criteria
$scope.getFilteredData = function () {
var promise = ngservice.getfilteredData($scope.SelectedCriteria, $scope.filterValue);
promise.then(function (resp) {
$scope.Orders = resp.data;
$scope.Message = "Call is Completed Successfully";
}, function (err) {
$scope.Message = "Call Failed " + err.status;
});
};
[Route("Orders")]
public List<OrderManager> GetOrders()
{
return ctx.OrderManagers.ToList();
}
/// <summary>
/// Get Orders based on Criteria
/// </summary>
/// <param name="filter"></param>
/// <param name="value"></param>
/// <returns></returns>
[Route("Orders/{filter}/{value}")]
public List<OrderManager> GetOrdersByCustName(string filter,string value)
{
List<OrderManager> Res = new List<OrderManager>();
switch (filter)
{
case "CustomerName":
Res = (from c in ctx.OrderManagers
where c.CustomerName.StartsWith(value)
select c).ToList();
break;
case "MobileNo":
Res = (from c in ctx.OrderManagers
where c.CustomerMobileNo.StartsWith(value)
select c).ToList();
break;
case "SalesAgentName":
Res = (from c in ctx.OrderManagers
where c.SalesAgentName.StartsWith(value)
select c).ToList();
break;
}
Firstly, you could modify/create method to accept current page index and page size as arguments, then you could use AngularJS $http service to send request to server side method to fetch paged data on pager index change.
Secondly, you could fetch all records from server and stored the data in scope property as data source, then you could do paging for this data source on pager index change.
Besides, you could check the following articles to know how to implement pagination with AngularJS.ss
please debug your JavaScript code to make sure if any error with code snippet and you could use F12 developer tools Network tool to check if send request to Web API controller action method and fetch data from server.
Best Regards,
Fei Han
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.
Member
3 Points
398 Posts
Server side pagination with angular js.plz help
Jun 27, 2016 12:10 PM|suvo|LINK
Basically there is a grid on page load user can filer based on certain criteria.I want to show server side pagination on this grid.Please help me to so..
//The Module Declaration
var app = angular.module('ngmodule', []);
//Declaring Service
app.service('ngservice', function ($http) {
//The function to read all Orders
this.getOrders = function () {
var res = $http.get("/Orders");;
return res;
};
//The function to read Orders based on filter and its value
//The function reads all records if value is not entered
//Else based on the filter and its value, the Orders will be returned
this.getfilteredData = function (filter, value) {
var res;
if (value.length == 0) {
res = $http.get("/Orders");
return res;
} else {
res = $http.get("/Orders/" + filter + "/" + value);
return res;
}
};
});
//Declaring the Controller
app.controller('ngcontroller', function ($scope, ngservice) {
$scope.Selectors = ["CustomerName", "SalesAgentName", "MobileNo"];
$scope.SelectedCriteria = ""; //The Object used for selecting value from <option>
$scope.filterValue = ""; //The object used to read value entered into textbox for filtering information from table
// pagination
$scope.curPage = 0;
$scope.pageSize = 5;
loadOrders();
//Function to Load all Orders
function loadOrders() {
var promise = ngservice.getOrders();
promise.then(function (resp) {
$scope.Orders = resp.data;
$scope.Message = "Call is Completed Successfully";
}, function (err) {
$scope.Message = "Call Failed " + err.status;
});
};
//Function to Load orders based on criteria
$scope.getFilteredData = function () {
var promise = ngservice.getfilteredData($scope.SelectedCriteria, $scope.filterValue);
promise.then(function (resp) {
$scope.Orders = resp.data;
$scope.Message = "Call is Completed Successfully";
}, function (err) {
$scope.Message = "Call Failed " + err.status;
});
};
});
HTML:-
<div ng-app="ngmodule">
<div ng-controller="ngcontroller">
<table class="table table-bordered table-condensed">
<tr>
<td>Search By:</td>
<td>
<select ng-model="SelectedCriteria" ng-options="S for S in Selectors"></select>
</td>
<td>Enter Search Value:</td>
<td>
<input type="text" ng-model="filterValue" class="form-control" ng-change="getFilteredData()" />
</td>
</tr>
</table>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>OrderId</th>
<th>Customer Name</th>
<th>Contact No</th>
<th>Ordered Item</th>
<th>Quantity</th>
<th>Sales Agent Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in Orders">
<td>{{order.OrderId}}</td>
<td>{{order.CustomerName}}</td>
<td>{{order.CustomerMobileNo}}</td>
<td>{{order.OrderedItem}}</td>
<td>{{order.OrderedQuantity}}</td>
<td>{{order.SalesAgentName}}</td>
</tr>
</tbody>
</table>
</div>
Controler
[Route("Orders")]
public List<OrderManager> GetOrders()
{
return ctx.OrderManagers.ToList();
}
/// <summary>
/// Get Orders based on Criteria
/// </summary>
/// <param name="filter"></param>
/// <param name="value"></param>
/// <returns></returns>
[Route("Orders/{filter}/{value}")]
public List<OrderManager> GetOrdersByCustName(string filter,string value)
{
List<OrderManager> Res = new List<OrderManager>();
switch (filter)
{
case "CustomerName":
Res = (from c in ctx.OrderManagers
where c.CustomerName.StartsWith(value)
select c).ToList();
break;
case "MobileNo":
Res = (from c in ctx.OrderManagers
where c.CustomerMobileNo.StartsWith(value)
select c).ToList();
break;
case "SalesAgentName":
Res = (from c in ctx.OrderManagers
where c.SalesAgentName.StartsWith(value)
select c).ToList();
break;
}
return Res;
}
All-Star
40485 Points
6233 Posts
Microsoft
Re: Server side pagination with angular js.plz help
Jun 28, 2016 09:44 AM|Fei Han - MSFT|LINK
Hi suvo,
Firstly, you could modify/create method to accept current page index and page size as arguments, then you could use AngularJS $http service to send request to server side method to fetch paged data on pager index change.
Secondly, you could fetch all records from server and stored the data in scope property as data source, then you could do paging for this data source on pager index change.
Besides, you could check the following articles to know how to implement pagination with AngularJS.ss
http://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with
https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
Best Regards,
Fei Han
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.
Member
3 Points
398 Posts
Re: Server side pagination with angular js.plz help
Jun 28, 2016 03:39 PM|suvo|LINK
with reference to https://www.pointblankdevelopment.com.au/blog/angularjs-aspnet-web-api-2-server-side-sorting-searching-and-paging
I have found out a way..but unfortunately my pagination div is not coming..plz suggest where i am doing wrong
JS:-
//'use strict';
//The Module Declaration
var app = angular.module('ngmodule', []);
//angular.module('Users')
app.controller('ngcontroller',
['$scope', 'UserService',
function ($scope, UserService) {
$scope.pagingInfo = {
page: 1,
itemsPerPage: 30,
sortBy: 'FirstName',
reverse: false,
search: '',
totalItems: 0
};
$scope.search = function () {
$scope.pagingInfo.page = 1;
loadUsers();
};
$scope.sort = function (sortBy) {
if (sortBy === $scope.pagingInfo.sortBy) {
$scope.pagingInfo.reverse = !$scope.pagingInfo.reverse;
} else {
$scope.pagingInfo.sortBy = sortBy;
$scope.pagingInfo.reverse = false;
}
$scope.pagingInfo.page = 1;
loadUsers();
};
$scope.selectPage = function (page) {
$scope.pagingInfo.page = page;
loadUsers();
};
function loadUsers() {
$scope.users = null;
UserService.GetUsers($scope.pagingInfo).success(function (data) {
$scope.users = data.data;
$scope.pagingInfo.totalItems = data.count;
});
}
// initial table load
loadUsers();
}]);
//'use strict';
//angular.module('Users')
app.factory('UserService', ['$http',
function ($http) {
var service = {};
service.GetUsers = function (pagingInfo) {
return $http.get('/users', { params: pagingInfo });
};
return service;
}]);
Controller:-
public class UsersController : ApiController
{
[Route("users")]
public IHttpActionResult Get(
int page = 1,
int itemsPerPage = 30,
string sortBy = "FirstName",
bool reverse = false,
string search = null)
{
// create list of 100 dumy users, replace
// with call to repo in real app
var users = Enumerable.Range(1, 100)
.Select(x => new User
{
Id = x,
FirstName = "FirstName" + x,
LastName = "LastName" + x,
Username = "Username" + x,
Email = "Email" + x,
Role = "Role" + x
}).AsQueryable();
// searching
if (!string.IsNullOrWhiteSpace(search))
{
search = search.ToLower();
users = users.Where(x =>
x.FirstName.ToLower().Contains(search) ||
x.LastName.ToLower().Contains(search) ||
x.Username.ToLower().Contains(search) ||
x.Email.ToLower().Contains(search) ||
x.Role.ToLower().Contains(search));
}
// sorting (done with the System.Linq.Dynamic library available on NuGet)
//users = users.OrderBy(sortBy + (reverse ? " descending" : ""));
// paging
var usersPaged = users.Skip((page - 1) * itemsPerPage).Take(itemsPerPage);
// json result
var json = new
{
count = users.Count(),
data = usersPaged.Select(x => new
{
Id = x.Id,
FirstName = x.FirstName,
LastName = x.LastName,
Username = x.Username,
Email = x.Email,
Role = x.Role
})
};
return Ok(json);
}
}
View:-
<div ng-app="ngmodule">
<div ng-controller="ngcontroller">
<form class="form-inline" ng-submit="search()" role="form">
<div class="form-group">
<input type="text" class="form-control input-sm" ng-model="pagingInfo.search" placeholder="Search...">
<button type="submit" class="btn btn-info btn-sm"><strong>Search</strong></button>
</div>
</form>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th><a href="" ng-click="sort('FirstName')">First Name</a></th>
<th><a href="" ng-click="sort('LastName')">Last Name</a></th>
<th><a href="" ng-click="sort('Username')">Username</a></th>
<th><a href="" ng-click="sort('Email')">Email</a></th>
<th><a href="" ng-click="sort('Role')">Role</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.FirstName}}</td>
<td>{{user.LastName}}</td>
<td>{{user.Username}}</td>
<td>{{user.Email}}</td>
<td>{{user.Role}}</td>
</tr>
</tbody>
</table>
<pagination page="pagingInfo.page"
total-items="pagingInfo.totalItems"
items-per-page="pagingInfo.itemsPerPage"
on-select-page="selectPage(page)"
max-size="10"
rotate="false"
boundary-links="true"></pagination>
</div>
</div>
All-Star
40485 Points
6233 Posts
Microsoft
Re: Server side pagination with angular js.plz help
Jul 11, 2016 07:27 AM|Fei Han - MSFT|LINK
Hi suvo,
please debug your JavaScript code to make sure if any error with code snippet and you could use F12 developer tools Network tool to check if send request to Web API controller action method and fetch data from server.
Best Regards,
Fei Han
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.