CODEWITHSUNDEEP
javascriptangularjsdrupalpagination
Nicu Hutu
Nicu Hutu

Reputation: 51

angular js and Drupal filter and pagination

I am creating a custom module in Drupal 7, with views_datasource module pulling the data in Json format and angular filtering data in the front end.(there are less than 50 results from view). The problem I have is when I try to paginate the results. The app displays ALL the results, with pagination numbers on bottom. When I type into the filter text input, the results are properly filtered and the pagination reacts normal (shrinks and expand). What I am trying to do is make my display results and the pagination work together, so that the maximum number of results per page is 2. I am very new to this so any little help is appreciated. Thank you in advance for your time! Here is the code I have so far. First I have an app.js

var cats = angular.module('cats', ['ui.bootstrap']);

jQuery(document).ready(function() { 
  angular.bootstrap(document.getElementById('cats-app'),['cats']);
});

Then my catsController.js

cats.controller('catscontroller', function ($scope, $http, $filter, $timeout) {    
  $scope.currentPage = 1;
  $scope.itemsPerPage = 2;

$scope.allCats = [];
  $http.get('json/cats').success(function (result) {    
    $scope.allCats =   result.nodes;
  });      

$scope.filter = function() {
        $timeout(function() {             
            $scope.totalItems = $scope.filtered.length;

        }, 10);

    };

     $scope.pageChanged = function (currentPage) {
    var start = (currentPage - 1) * $scope.itemsPerPage;
    var end = start + $scope.itemsPerPage;
    $scope.allCats = $scope.allCats.slice(start, end);
    };

});

note: the last part doesn't do anything now but I was working when paginating without filter
And last, my all-cats.tpl.php

<div id="cats-app" ng-controller="catscontroller" >
 <input type="text" ng-model="search.node.title" ng-change="filter()" placeholder="Search"/><br/>
    <br/>
    <ul>
        <li ng-repeat="cat in filtered = (allCats | filter:search) " >
        {{cat.node.title}}</li>
    </ul>

  <div class="pagination-centered">
      <pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"
       ng-change="pageChanged(currentPage)"></pagination>    
 </div>    
</div>

EDIT:
Nagasimha's code looks much more cleaner but still doesn't do the trick...
I have 6 dummy titles: dog3, dog2, dog1, cat3, cat2, cat1. When I go to the page I have all 6 results in a list and the pager 1-2-3.Then when I type "dog" I get dog3, dog2, dog1 and the pager 1-2. There are suppose to be only 2 items per page, so the pager is right ( round 3 items / 2 per page = 2) but I don't know how exactly to show just dog3, dog2 on page 1 and then dog 1 on page 2 

 cats.controller('catscontroller', function ($scope, $http, $filter, $timeout) {

  $scope.currentPage = 1;
  $scope.itemsPerPage = 2;
  $scope.allCats = [];
  $scope.cats=[];
  $scope.filter = function() {
        $timeout(function() {             
            $scope.totalItems = $scope.filtered.length;

        }, 10);

    };

     $scope.pageChanged = function (currentPage) {
    var start = (currentPage - 1) * $scope.itemsPerPage;
    var end = start + $scope.itemsPerPage;
    $scope.cats = $scope.allCats.slice(start, end);
    };

    $http.get('json/cats').success(function (result) {    
    $scope.allCats =   result.nodes;
    $scope.filter();


    $scope.totalItems = $scope.allCats.length;
    $scope.cats = $scope.allCats.slice(0, $scope.itemsPerPage); 
    });      
});

and then in my .tpl.php file

   ....
    <div class="cat" ng-repeat="cat in cats | filter:search" >
    ....

--this gives the correct pagination and display ( dog3, dog2 on page 1, and so on, 1-2-3 pages) but now when I use "dog" in the filter I still have 1-2-3 pages (insted of 1-2) and dog3, dog2 on page 1; dog1 on page 2 and blank on page 3

If I use same controller in tpl.php

...
<li ng-repeat="cat in filtered = (cats | filter:search) " >
...

then I only get dog3, dog2 on page 1 (wiht the filter working for just these 2 results)

Upvotes: 0

Views: 384

Answers (1)

Nagasimha Iyengar
Nagasimha Iyengar

Reputation: 461

Try reordering the functions and call the filter after getting the json data. Code below:

$scope.allCats = []; $scope.cats=[];

$scope.filter = function() {
        $timeout(function() {             
            $scope.totalItems = $scope.filtered.length;

        }, 10);

    };

     $scope.pageChanged = function (currentPage) {
    var start = (currentPage - 1) * $scope.itemsPerPage;
    var end = start + $scope.itemsPerPage;
    $scope.cats = $scope.allCats.slice(start, end);
    };

});

$http.get('json/cats').success(function (result) {    
    $scope.allCats =   result.nodes;
    $scope.filter();
 });

Please see changes. Also, use the above code with "ng-repeat cat in cats"

Upvotes: 0

Related Questions