Paginer une Base de Données noSql Firebase

INTRODUCTION


Une lib existe pour paginer une base de données noSql Firebase :

http://firebase.github.io/firebase-util/#/toolbox/Paginate/example/page

Leur exemple comporte une erreur à la ligne :

<li ng-repeat="item in scrollItems">{{item.$id}}: {{item.string}}</li>

Pour le voir marcher, il faut écrire :

<li ng-repeat="item in pageItems">{{item.$id}}: {{item.string}}</li>

 


EXEMPLE FONCTIONNEL(Cliquer ici pour tester) :


 

index.html

<!DOCTYPE html>
<html  class="" lang="en">
	<head>

		<!-- CHARGEMENT DES LIBRAIRIES -->

				<!-- CHARGEMENT LIB ANGULAR -->
				<script type="text/javascript" src="librairies/angular-1.3.13/angular.min.js"></script>

				<!-- AngularFire pour firebase-->
				<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>

				<!-- Firebase Utils -->
				<script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>
				<script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script>
				<script>
					Firebase.util.logLevel('log');
					Firebase.util.log('hello world');
				</script>

					<!--	APPEL LIB BOOTSTRAP -->
				<script src="librairies/bootstrap/js/ui-bootstrap-tpls-0.14.3.min.js"></script>
				 	<link rel='stylesheet prefetch' href='librairies/bootstrap/css/bootstrap.css'>
				 	<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
				
				
				
				<!-- Le CONTROLEUR -->
				<script src="controleurs/app.js"></script>
	</head>

<body ng-app="app" ng-controller="ctrl">
<h4>Showing: Page {{ pageItems.currentPageNumber }} of {{ pageItems.pageCount }}<span ng-show="pageItems.couldHaveMore"> or more</span></h4>
<ul>
	<li ng-repeat="item in pageItems">{{item.$id}}: {{item.string}}</li>
</ul>
<button class="btn btn-primary"
            ng-click="pageItems.page.setPage(1)"
            ng-disabled="pageItems.currentPageNumber < 2">
        <i class="glyphicon glyphicon-fast-backward"></i>
    </button>

    <button class="btn btn-primary"             ng-click="pageItems.page.prev()"             ng-disabled="!pageItems.page.hasPrev()">
        <i class="glyphicon glyphicon-backward"></i>
    </button>

    <button class="btn btn-primary"             ng-click="pageItems.page.next()"             ng-disabled="!pageItems.page.hasNext()">
        <i class="glyphicon glyphicon-forward"></i>
    </button>

    <button class="btn btn-primary"             ng-click="pageItems.page.setPage(pageItems.pageCount)"             ng-disabled="!pageItems.page.hasNext() || pageItems.currentPageNumber >= pageItems.pageCount">
        <i class="glyphicon glyphicon-fast-forward"></i>
    </button>

</body>
</html>

app.js :

var app = angular.module('app', ['firebase']);

app.controller('ctrl', function($scope, $pageArray) {
   var ref = new Firebase('https://fbutil.firebaseio.com/paginate');
  $scope.pageItems = $pageArray(ref, 'number');
});

app.factory('$pageArray', function($firebaseArray) {
  return function(ref, field) {
    // Créer une référence de pagination
    var pageRef = new Firebase.util.Paginate(ref, field, {maxCacheSize: 250});
    // génére un tableau synchronisé utilisant  the special page ref
    var list = $firebaseArray(pageRef);
    // store the "page" scope on the synchronized array for easy access
// stocke le scope de la page sur le tableau synchronisé pour faciliter l'acces
    list.page = pageRef.page;

    // when the page count loads, update local scope vars
// Quand la page compte les enregitrement, mettre à jour le scope local de variables
    pageRef.page.onPageCount(function(currentPageCount, couldHaveMore) {
      list.pageCount = currentPageCount;
      list.couldHaveMore = couldHaveMore;
    });

    // when the current page is changed, update local scope vars
    pageRef.page.onPageChange(function(currentPageNumber) {
      list.currentPageNumber = currentPageNumber;
    });

    // load the first page
    pageRef.page.next();

    return list;
  }
});
Publicités