Needing a -simple- dialog system for Angular-JS supporting modals, dynamic templates, dragging, and a consisten skin for ALL the dialogs i wrote this small module.
The library is able to open nested modal dialogs, alerts and confirm.
The source is here: sgGrid.1.0.0.zip.
When the count is present:
The sample can be run with Firefox, in general or by running, into the directory,
var myApp = angular.module('myApp',['sgGrid']);
The following variables must be set
$scope.data = []; //The ngModel $scope.pageSize = 10; $scope.maxPages = 10; $scope.totalCount = 0; $scope.currentPage = 0; $scope.buttons = []; //The buttons list
First a function must be added to build the address of the REST service. It should get
var getAddress = function(requiredPage,pageSize,itemsToRetrieve){ ... }
A function to get the array of items from the response.
var getResponseData = function(response,headers){ ... }
A function to get the total number of items from the response
var getTotalCount = function(response,headers){ ... }
Then the load data function will be as the following. Note that we call getAddress requiring one item more than the page size, this is to ensure that we know if a next page exists!
$scope.loadData = function(requiredPage){ //Sanity check if(!requiredPage){ requiredPage = 0; } //Getting the address $http.get(getAddress(requiredPage,$scope.pageSize,$scope.pageSize+1)) .success(function(response, status, headers, config){ var data = getResponseData(response,header); $scope.hasNext = data.length > $scope.pageSize; if($scope.hasNext){ data = data.splice(0,$scope.pageSize); } //If has a count listTotal = getTotalCount(response,headers); $scope.currentPage = requiredPage; $scope.listTotal = listTotal; $scope.data = data; }); }
When the service does not return the total number of available items we can work this way. We use the pageSize+1 element as a marker!
$scope.loadData = function(requiredPage){ //Sanity check if(!requiredPage){ requiredPage = 0; } //Getting the address $http.get(getAddress(requiredPage,$scope.pageSize,$scope.pageSize+1)) .success(function(response, status, headers, config){ var data = getResponseData(response,header); $scope.hasNext = data.length > $scope.pageSize; if($scope.hasNext){ data = data.splice(0,$scope.pageSize); } //If has a count listTotal = $scope.pageSize*(requiredPage+1) + ($scope.hasNext?1:0); $scope.currentPage = requiredPage; $scope.listTotal = listTotal; $scope.data = data; }); }
We setup the attributes
The paginaton buttons contains the fields
<div sg-grid ng-model="data" sg-page-size="pageSize" sg-load-data="loadData" sg-max-pages="maxPages" sg-current-page="currentPage" sg-count="listTotal" sg-buttons="buttons"> <nav> <ul class="pagination"> <li ng-repeat="button in buttons" ng-class="{'active':button.selected}"> <a ng-click="button.go()" >{{button.label}}</a> </li> </ul> </nav> <table class="table"> <tr><th>First Name</th><th>Last Name</th><th> </th></tr> <tr ng-repeat="customer in data"> <td>{{customer.first_name}}</td> <td>{{customer.last_name}}</td> <td> <button type="button" class="btn btn-default btn-sm" ng-click="show(customer)"> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> </button> </td> </tr> </table> </div>