Pagination in angularjs 1.5

Question

I am using Angularjs for my application.I am facing issue in using Pagination option.I am using dir-paginate option for creating pagination.

Here is my html

    <tr data-dir-paginate="college in colleges | itemsPerPage: 10"
    data-current-page="currentPage"> 
    <td>{{$index + 1}}</td>
    <td><a href="#!/collegedetails/{{college.collegeId}}">
    {{college.name}}</a></td>
    <td>{{college.typeName}}</td>
    </tr>

Here is my Controller.js

    var Controller = function($scope, $rootScope)
    {
    var app = angular.module('adminApp',
    ['angularUtils.directives.dirPagination']);
    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;
    $scope.getAllColleges = function()
    {
     AdminCollegeService.getAllColleges().then(function(response){
     $scope.colleges=response.data;
    });
    }
    }

I have included dirPagination.js in my index page.But now it is displaying empty page.Sometimes it just keeps on loading continously without stopping.I am getting response from controller but i am not able to display in html.Am i missing something in the code?

Answer 1

I put a sample in plnk

I guessing for your code.. you need to call the getAllColleges() in somewhere.

check the link if it helps also put the code below here.

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="dirpaginatio.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    {{colleges}}
    <table class="table table-stripped" >
      <tr data-dir-paginate="college in colleges | itemsPerPage: 3"
      data-current-page="currentPage"> 
      <td>{{$index + 1}}</td>
      <td><a href="#!/collegedetails/{{college.collegeId}}">
      {{college.name}}</a></td>
      <td>{{college.typeName}}</td>
      </tr>
    </table>
    <dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)" ></dir-pagination-controls>
  </body>

</html>

CONTROLLER

var app = angular.module('plunker', ['angularUtils.directives.dirPagination']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.currentPage = 1;

    $scope.itemsPerPage = 3;
    $scope.getAllColleges = function()
    {
       //AdminCollegeService.getAllColleges().then(function(response){
       //$scope.colleges=response.data;
      //});
      $scope.colleges = [
        {name:'one', typeName:'a'},
        {name:'two', typeName:'b'},
        {name:'three', typeName:'c'},
        {name:'four', typeName:'d'},
        {name:'five', typeName:'e'}
      ];
    };

    $scope.getAllColleges();
});

Pagination in angularjs 1.5

Question

1 answers

solution1
0 2017-09-15 19:16:44

Pagination in angularjs 1.5

Question

1 answers

solution1 0 2017-09-15 19:16:44

solution1
0 2017-09-15 19:16:44