JSFiddle - React, Tailwind, and code Playground

by Arunkumar Gudelli

HTML

<div ng-app="app">
    <div ng-controller="PaginationCtrl">
      <table class="table table-striped">
        <thead>
          <tr>
            <th ng-repeat="(i,th) in head" ng-class="selectedCls(i)" ng-click="changeSorting(i)">{{th}}</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in pagedItems.$orderBy(sort.column, sort.descending)">
            <td>{{item.a}}</td>
            <td>{{item.b}}</td>
            <td>{{item.c}}</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3">
            <button class="btn" href="#" ng-class="nextPageDisabledClass()" ng-click="loadMore()">Load More</button>
          </td>
        </tfoot>
      </table>
    </div>
</div>

JavaScript

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

 var items = [];
  for (var i=0; i<10; i++) {
    items.push({ a: i, b: "name "+ i, c: "description " + i });
  }

  
  var get = function(offset, limit) {
      return items.slice(offset, offset+limit);
    };
  var total =function() {
      return items.length;
    }

app.filter('makeUppercase', function () {
    return function (item) {
        return item.toUpperCase();
    };
});

app.controller('PaginationCtrl', function () {
    var scope=this;

  scope.itemsPerPage = 5;
  scope.currentPage = 0;
  scope.total = total();
  scope.pagedItems = get(scope.currentPage*scope.itemsPerPage, scope.itemsPerPage);

  scope.head = {
        a: "Name",
        b: "Surname",
        c: "City"
  };

  scope.loadMore = function() {
    scope.currentPage++;
    var newItems = get(scope.currentPage*scope.itemsPerPage, scope.itemsPerPage);
    scope.pagedItems = scope.pagedItems.concat(newItems);
  };

  scope.nextPageDisabledClass = function() {
    return scope.currentPage === scope.pageCount()-1 ? "disabled" : "";
  };

  scope.pageCount = function() {
    return Math.ceil(scope.total/scope.itemsPerPage);
  };

  scope.sort = {
        column: 'b',
        descending: false
    };
   
  scope.selectedCls = function(column) {
        return column == scope.sort.column && 'sort-' + scope.sort.descending;
    };
    
  scope.changeSorting = function(column) {
        var sort = scope.sort;
        if (sort.column == column) {
            sort.descending = !sort.descending;
        } else {
            sort.column = column;
            sort.descending = false;
        }
    };
});