Server side pagination with angular js.plz help

Question

User483994611 posted

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;
        }

Answer 1

User61956409 posted

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

Answer 2

User483994611 posted

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>

Answer 3

User61956409 posted

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