Server side pagination with angular js.plz help RSS

• • Reply
  

  suvo

  Member

  1 Points

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

• • Reply
  

  Fei Han - MS...

  All-Star

  37628 Points

  4950 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.
  
• • Reply
  

  suvo

  Member

  1 Points

  360 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>

• • Reply
  

  Fei Han - MS...

  All-Star

  37628 Points

  4950 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.