locked
Server side pagination with angular js.plz help RRS feed

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

    Monday, June 27, 2016 12:10 PM

All replies

  • 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

    Tuesday, June 28, 2016 9:44 AM
  • 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>

    Tuesday, June 28, 2016 3:39 PM
  • 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

    Monday, July 11, 2016 7:27 AM