JSFiddle - React, Tailwind, and code Playground

by M.s Muthu

HTML

<body >
		<div ng-app="sampleapp">
			<div ng-controller="samplecontoller" ng-init="showData()">
				<ul>
					<li class="paginationclass" ng-repeat="datalist in datalists | limitTo: paginationLimit()">
						<div>Name : {{ datalist.name }} Age : {{ datalist.age }}</div>
					</li>
				</ul>
				<div ng-show="nodata"> No data found</div>
				<div class="pagination pagination-centered">
					<button class="show-more-btn" ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()">Show more</button>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="angular.min.js"></script>
		<script type="text/javascript" src="app.js"></script>
	</body>

JavaScript

var myapp = angular.module('sampleapp', []);

myapp.controller('samplecontoller', function($scope, $http) {
    $scope.datalists = data;
    $scope.nodata = false;
    $scope.showData = function() {
       /* $http.post("data.json")
            .success(function(data) {
              if(data.length<1)
                  $scope.nodata = true;
              else
                $scope.datalists = data;
              
            }).error(function() {
                alert("Sorry your sports not found");
            }); */
        


        var pagesShown = 1;
        var pageSize = 10;

        $scope.paginationLimit = function(data) {
            return pageSize * pagesShown;
        };
        $scope.hasMoreItemsToShow = function() {
            return pagesShown < ($scope.datalists.length / pageSize);
        };
        $scope.showMoreItems = function() {
            pagesShown = pagesShown + 1;
        };


    }

});

var data = [
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age": "1",
    "name": "text1"
  },
  {
    "age":...