Table based show more style pagination

Table based show more style pagination for TypeKit API

by masudcsesust04

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<h1 class="header text-info">Pagination in the Typekit API using AngularJS</h1>

<div ng-controller="MainCtrl">
    <table class="table table-hover table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Link</th>                
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="family in families">
                <td>{{family.id}}</td>
                <td>{{family.name}}</td>
                <td>{{family.link}}</td>                
            </tr>            
        </tbody>
    </table>        
    <pre>{{status_bar}}</pre>
    <p><button class="btn" ng-show="has_more()" ng-click="show_more()"><i class="icon-plus"></i> Show More</button></p>
</div>

CSS

h1.header{font-size:18px;}

JavaScript

'use strict';

var App = angular.module('PaginationApp', []);

App.controller('MainCtrl', ['$scope', 'TypekitService', '$filter', function($scope, Typekit, $filter){
    $scope.loadData = function(){                         Typekit.getTypekits($scope.page, $scope.per_page).then(function(response){                    
            $scope.more = response.data.library.families.length === $scope.per_page;
            $scope.families = $scope.families.concat(response.data.library.families);
            $scope.status_bar = "Showing " + ($scope.families.length === 0 ? "0" : "1") + " to " + $filter('number')($scope.families.length) + " of " + $filter('number')(response.data.library.pagination.count) + " entries";
             
        });
    };
    
    $scope.show_more = function(){
        $scope.page += 1;
        $scope.loadData();
    }
    
    $scope.has_more = function(){
        return $scope.more;
    }
    
    $scope.per_page = 100;
    $scope.page = 1;        
    $scope.families = [];        
    $scope.more = true;
    $scope.status_bar = "";
    $scope.loadData();    
}])


App.factory('TypekitService',['$http',function($http){
    return {
        getTypekits : function(page, per_page){
            return $http.jsonp('https://typekit.com/api/v1/json/libraries/full?page='+page+'&per_page='+per_page+'&callback=JSON_CALLBACK');
        }
    }
}]);