JSFiddle - React, Tailwind, and code Playground

by Dong Nguyen

HTML

<div class="container main">

        <ng-include src="'/public/templates/header.html'"></ng-include>

        <div class="row">
            <div class="col-md-12 align-center">
                <dir-pagination-controls
                      template-url="/public/js/directives/pagination/dirPagination.tpl.html"
                      pagination-id="listOfPlayers">
                </dir-pagination-controls>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Nationality</th>
                        <th>Club</th>
                        <th>Position</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="person in main.players | itemsPerPage: main.everyPage"
                        pagination-id="listOfPlayers">
                        <td>{{person.name}}</td>
                        <td>{{person.age}}</td>
                        <td>{{person.nationality}}</td>
                        <td>{{person.club}}</td>
                        <td>{{person.position}}</td>
                        <td>{{person.price}}</td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>

JavaScript

/**
 * app.js
 * start bootstraping application
 */

;(function(){

    'use strict';

    angular.module('app', ['angularUtils.directives.dirPagination']);

})();


/**
 * main.ctrl.js
 */

;(function(){

    'use strict';

    angular
    .module('app')
    .controller('MainController', MainController);

    function MainController($http) {

        var vm = this;

        vm.title = 'Transfer Market';

        vm.players = [];

        // pagination
        vm.everyPage = 30;
        vm.currentPage = 1;
        vm.playerCount = 0;

        $http.get('http://ng-api.techpush.net/players').success(function(data){
            console.log(data);
            if(!!data && !data.error){
                var result = data.result;
                vm.playerCount = result.totalItems;
                vm.players = result.entries;
            }
        });
    }

})();