cfspaginator

CFPaginator to AngularJS. CFPaginator is a simple directive to include pagination to any element we need with paginations.
Homepage:
0 people use it

CFPaginator to AngularJS

CFPaginator is a simple directive to include pagination to any element we need with paginations.

It is assumed

  • Install nodejs: sudo apt-get install nodejs npm
  • Install bower and update: sudo npm install -g bower and bower update

Usage

  • With bower: bower install --save cfpaginator
  • Add cf as a dependency to your app. Example: angular.module('project', [ ..., 'cf' ])

In html:

Example to show grid:

Controller

In the controller you should create a function with same name that parameter fnc of the directive, in this case is getData().

$scope.params.offset and $scope.params.limit is generated automatically by the directive. The initial value to $scope.params.limit is specified in the parameter "limit" in the html.

$scope.params.total must be instantiated when data from the API with the value of total elements are obtained in the Database.

To update the pagination when inserting or removing an item should use the event $emit: // Remove function. $scope.remove = function (index) { Model.remove(index); $scope.$emit('refresh:table:years_grid_listener'); }

Where "years_grid_listener" is the phrase specified by you in "on" parameter of directive.

Options

The directive accepts the following attributes: - 'fnc': Default value is 'getData()'. Function to execute in controller to get data for show in grid. - 'on': Default value is "". String to complete de event $rootScope.$on('refresh:table:' $attrs.on, function () ... with $attrs.on to invoke a specific controller of grid. - 'indices': Default value is 5. Limit number for pagination size. - 'limit': Default value is 10. Maximum number of items per page. - 'templateUrl': Default value is cfpaginator.html. Template to show paginator.

Installation for used example

  • Install node http-server: sudo npm install -g http-server
  • Access to folder cd ./bower_components/cfpaginator
  • Execute command: http-server . and open browser with URL http://localhost:8080/example/
comments powered by Disqus
This page was last updated almost 2 years ago.