JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<h1>ng-Test</h1>
<div ng-controller="avwebController">
    <hr/>
    <p>
        pagin.totalContent : <span ng-bind="pagin.totalContent"></span><br/>
        pagin.offset : <span ng-bind="pagin.offset"></span><br/>
        pagin.limit : <span ng-bind="pagin.limit"></span><br/>
        pagin.totalPage : <span ng-bind="pagin.totalPage"></span><br/>
        pagin.numberPage : <span ng-bind="pagin.numberPage"></span><br/>
    </p>
    <hr/>
    <table border="1">
        <tr><th>number ID</th><th>Name</th><th>Money</th></tr>
        <tr ng-repeat="c in contents | offsetAt:pagin.offset | limitTo:pagin.limit">
            <td ng-bind="c.id"></td>
            <td ng-bind="c.name"></td>
            <td ng-bind="c.money"></td>
        </tr>
    </table>
    <hr/>
    <ul id="content-pagin">
        <li ng-repeat="p in pagin.numberPage">
            <button ng-bind="p" ng-click="pagin.changePage(p)"></button>
        </li>
    </ul>
</div>

CSS

#content-pagin {list-style:none;margin:0px;padding:0px;}
#content-pagin li {display:inline-block;margin:0px 2px;padding:0px;}

JavaScript

angular.module("avwebApp", []).controller("avwebController", function($scope) {
    
    $scope.contents = [
        {"id":2,"name":"Anov A","money":"1000.000"},
        {"id":4,"name":"Anov B","money":"100.000"},
        {"id":5,"name":"Anov C","money":"190.000"},
        {"id":7,"name":"Anov D","money":"1.000"},
        {"id":9,"name":"Anov E","money":"25.000"},
        {"id":10,"name":"Anov F","money":"500"},
        {"id":15,"name":"Anov G","money":"10"},
        {"id":17,"name":"Anov H","money":"500.500"},
        {"id":20,"name":"Anov I","money":"900"}
    ];
    
    $scope.pagin = {};
    $scope.pagin.offset = 0;
    $scope.pagin.limit = 2;
    
    $scope.pagin.totalContent = $scope.contents.length;
    $scope.pagin.totalPage = Math.ceil($scope.pagin.totalContent/$scope.pagin.limit);
    $scope.pagin.numberPage = [];
    
    for(n = 1; n <= $scope.pagin.totalPage; n++) {
        $scope.pagin.numberPage.push(n);
    }
    
    $scope.pagin.changePage = function(num) {
        $scope.pagin.offset = (num-1) * $scope.pagin.limit;
    }
    
}).filter("offsetAt", function() {
    return function(input, start) {
        start = +start;
        return input.slice(start);
    }
});