JSFiddle - React, Tailwind, and code Playground

by raul_arabaolaza

HTML

<table summary="Submitted table designs" class="table_type_03" id="grid">
        <caption>Data execution algorithm</caption>
        <thead ng-cloak>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
        </tr>
        </thead>
        <tfoot ng-cloak>
        <tr>
            <td colspan="3">Page {{page}} of {{total}}</td>
        </tr>
        </tfoot>
        <tbody ng-cloak>
        <tr ng-repeat="model in models" ng-class-even="odd" ng-cloak>
            <td>{{model.identifier}}</td>
            <td>{{model.executionDateEnd}}</td>
            <td>{{model.status}}</td>
            <td><a ng-href="#/results/{{model.identifier}}">Graph</a></td>
        </tr>
        </tbody>
    </table>
    <div id="tableNav">[<a href="#" ng-click="loadPrevious()">Previous</a>] [<a
            href="#" ng-click="loadFirst()">First</a>] <a href="#" ng-show="page>=3" ng-click="load(page-2)">{{page-2}}</a> <a href="#" ng-show="page>=2" ng-click="load(page-1)">{{page-1}}</a> {{page}} <a href="#"ng-show="total>=page+1" ng-click="load(page+1)">{{page+1}}</a> <a href="#" ng-show="total>=page+2" ng-click="load(page+2)">{{page+2}}</a> [<a
            href="#" ng-click="loadLast()">Last</a>] [<a href="#" ng-click="loadNext()">Next</a>]
    </div>

JavaScript

angular.module('poc_daaas', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/executions', {template: 'partials/historico.html',   controller: AlgorithmListCtrl}).
        when('/results/:identifier', {template: 'partials/results.html', controller: AlgorithmResultsCtrl}).
        otherwise({redirectTo: '/executions'});
}]);

function AlgorithmListCtrl($scope, $http) {

    var baseURL = 'http://host:port/loadhistoricalresult.action?_search=false&rows=15&sidx=&sord=asc';

    $scope.odd = "odd";

    $scope.loaded=false;

    if (!$scope.loaded) {
        $http({method:'GET', url:prepareURL(1)}).
            success(function (data, status) {
                $scope.models = data.gridModel;
                $scope.rowNum = data.rows;
                $scope.page = data.page;
                $scope.total = data.total;
                $scope.loaded=true;
            });
    }

    $scope.load = function (page) {
        var url = prepareURL(page);
        $http({method:'GET', url:url}).
            success(function (data, status) {
                $scope.models = data.gridModel;
                $scope.rowNum = data.rows;
                $scope.page = data.page;
                $scope.total = data.total;
            });
    };

    $scope.loadNext = function () {
        if ($scope.total >= $scope.page + 1) {
            $scope.load($scope.page + 1);
        }
    };

    $scope.loadFirst = function () {
        $scope.load(1);
    };

    $scope.loadLast = function () {
        $scope.load($scope.total);
    };
    $scope.loadPrevious = function () {
        if ($scope.page >= 2) {
            $scope.load($scope.page - 1);
        }
    };

    function prepareURL(page) {
        return baseURL + '&page=' + page;
    }

    ;

}