Paging

by aman1981

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.6.9/angular-sanitize.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div ng-app="myApp" ng-controller="IndexController">

  <ui-view> </ui-view>
  <div class="container">
    <div class="panel panel-default data-table">
      <div class="tab-panel">
        <ul class="nav nav-tabs">
          <li ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}">
            <a data-target="#tab" aria-controls="home" data-toggle="tab">{{tab.id}} <span ng-if="!isReadOnly" ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a>
          </li>
          <li ng-if="!isReadOnly && !isUpload" ng-click="addTable()">
            <a aria-controls="home" data-toggle="tab" ng-if="isEdit">(+) Add New Table</a>
          </li>
        </ul>
      </div>
      <div class="panel panel-default data-table">
        <div class="panel-heading">
          <table class="table table-bordered margin-top-15" ng-form="form">
            <thead>
              <tr class="actions row-border">
                <th class="hidden-border"></th>
                <th ng-repeat="c in targetTable.columns track by $index">
                  <span class="span-action">
					<a class="btn btn-xs"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
				</span>
                </th>
              </tr>
              <tr>
                <th>ID #</th>
                <th ng-repeat="c in...

CSS

.data-table .nav-pills li {
  text-transform: capitalize;
}

.nav.nav-pills li span {
  padding: 20px;
}

.table .unique-id {
  width: 10px !important;
  text-align: center;
  background-color: #f5f5f5;
}

.table td,
.table th {
  width: 120px !important;
}

.fixed-width {
  min-width: 120px !important;
  width: 120px !important;
}

.comment-fixed-width {
  min-width: 200px !important;
  width: 200px !important;
}

.table-set-columns {
  overflow: auto !important;
  width: 1468px !important;
}

.panel-body {
  overflow: auto;
}

.table .center {
  text-align: center;
}

.table th.font-normal {
  font-weight: normal;
}

.table .view-next-set {
  width: 5px;
  text-align: center;
  font-size: 0.9em;
}

.table .add-column {
  width: 60px;
  font-size: 1em;
  vertical-align: middle;
}

.table .unique-id,
.table td.blank {
  background-color: #f5f5f5;
}

JavaScript

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap', 'ngSanitize']);

app.controller("IndexController", ['$location', '$state', '$scope', '$http', function($location, $state, $scope, $http) {

  $scope.start = 0;
  $scope.limit = 10;

  $scope.next = function() {
    incrementLimit(true)
  }
  $scope.prev = function() {
    incrementLimit(false)
  }

  function incrementLimit(up) {
    if (up) {
      ($scope.start <= ($scope.targetTable.rows.length - $scope.limit)) ? $scope.start += 10: $scope.start = 0;
    } else {
      $scope.start > 10 ? $scope.start -= 10 : $scope.start = 0;
    }
  }

  //Start: Initialize table - Following is used to setup the UI table and setup its rows and columns
  $scope.createTable = function(tableCounter, currentTableId) {
    $scope.tableCounter++;
    return {
      id: currentTableId++,
      tableName: '',
      columns: [],
      rows: [{}],
      uniqueIdCounter: 1
    }
  }

  $scope.initializeTable = function(isEdit) {
    $scope.tableCounter = 0;
    var currentTableId = 0;
    var table = {
      id: 0,
      tableName: "",
      columns: [],
      rows: [{}]
    };

    $scope.tables = [table];
    $scope.targetTable = $scope.tables[0];
    $scope.tables = [];
    $scope.targetTable = null;
    $scope.isUpdating = false;
    $scope.showColumns = isEdit ? true : false;
    $scope.tables.push($scope.createTable($scope.tableCounter, currentTableId));

    // set the newly create table as active
    $scope.targetTable = $scope.tables[$scope.tableCounter - 1];
  }
  //End initializing table

  //Read json from the API
  $http.get('https://api.myjson.com/bins/9my34').success(function(data) {
    if (data.length > 0) {
      $scope.setJson = data;
      $scope.initializeTable(true);
      var columns = $scope.targetTable.columns;

      //These are the 3 columns of the Table but can vary dynamically(currently just hardcoding it)
      var refColName = "state, month , year";
      $scope.tabs = [];
      //Push the...