ngRepeat如何限制分页中的最大可见按钮

时间：2014-12-19 13:43:15

标签： javascript jquery pagination angularjs-ng-repeat

如果超出该值，则如何使分页限制（例如最大分页）应为5。 enter image description here

＆＃13;
＆＃13; 
var app = angular.module('App', []);
app.controller('Controller', function($scope) {
  $scope.editmode = false;
  // limit page items
  $scope.currentpage = 0;
  $scope.pageSize = 5;
  $scope.pagelist = function(start, end) {
    var ret = [];
    start = $scope.totalpages();
    if (!end) {
      end = start;
      start = 0;
    }
    for (var i = start; i < end; i++) {
      ret.push(i);
    }
    return ret;
  };
  $scope.prevlist = function() {
    if ($scope.currentpage > 0) {
      $scope.currentpage--;
    }
  };
  $scope.nextlist = function() {
    if ($scope.currentpage <= ($scope.items.length / $scope.pageSize - 1)) {
      $scope.currentpage++;
    }
  };
  $scope.showlist = function(argument) {
    $scope.currentpage = argument;
  };
  $scope.totalpages = function(argument) {
    return Math.ceil($scope.items.length / $scope.pageSize);
  };
  $scope.items = [{
    product: '1 Lorem ipsum',
    date: '12-March-2013',
    rate: 12.35,
    member: 1,
    status: 'approved'
  }, {
    product: '2 dolor sit',
    date: '1-January-2011',
    rate: 60.54,
    member: 3,
    status: 'pending'
  }, {
    product: '3 consectetur',
    date: '12-December-2014',
    rate: 12.56,
    member: 1,
    status: 'pending'
  }, {
    product: '4 adipisicing',
    date: '14-November-2014',
    rate: 0.99,
    member: 1,
    status: 'pending'
  }, {
    product: '5 do eiusmod',
    date: '2-November-2014',
    rate: 4.00,
    member: 2,
    status: 'approved'
  }, {
    product: '6 magna aliqua',
    date: '16-February-2014',
    rate: 6.54,
    member: 2,
    status: 'approved'
  }, {
    product: '7 exercitation',
    date: '30-November-2014',
    rate: 60.32,
    member: 2,
    status: 'pending'
  }, {
    product: '8 consequat',
    date: '5-May-2014',
    rate: 5.12,
    member: 1,
    status: 'denied'
  }, {
    product: '9 reprehenderit',
    date: '12-April-2014',
    rate: 8.99,
    member: 5,
    status: 'approved'
  }, {
    product: '10 voluptate',
    date: '18-November-2014',
    rate: 34.54,
    member: 4,
    status: 'approved'
  }, {
    product: '10 ugiat nulla',
    date: '28-June-2014',
    rate: 55.12,
    member: 1,
    status: 'pending'
  }, {
    product: '11 occaecat cupidatat',
    date: '21-June-2014',
    rate: 99.54,
    member: 3,
    status: 'pending'
  }, {
    product: '12 proident',
    date: '31-December-2014',
    rate: 15.50,
    member: 2,
    status: 'denied'
  }, {
    product: '13 culpa qui',
    date: '1-November-2014',
    rate: 34.05,
    member: 1,
    status: 'pending'
  }, {
    product: '14 Lorem ipsum',
    date: '12-March-2013',
    rate: 12.35,
    member: 1,
    status: 'approved'
  }, {
    product: '15 dolor sit',
    date: '1-January-2011',
    rate: 60.54,
    member: 3,
    status: 'pending'
  }, {
    product: '16 consectetur',
    date: '12-December-2014',
    rate: 12.56,
    member: 1,
    status: 'pending'
  }, {
    product: '17 adipisicing',
    date: '14-November-2014',
    rate: 0.99,
    member: 1,
    status: 'denied'
  }, {
    product: '18 do eiusmod',
    date: '2-November-2014',
    rate: 4.00,
    member: 2,
    status: 'approved'
  }, {
    product: '19 magna aliqua',
    date: '16-February-2014',
    rate: 6.54,
    member: 2,
    status: 'approved'
  }, {
    product: '20 exercitation',
    date: '30-November-2014',
    rate: 60.32,
    member: 2,
    status: 'pending'
  }, {
    product: '21 consequat',
    date: '5-May-2014',
    rate: 5.12,
    member: 1,
    status: 'denied'
  }, {
    product: '22 reprehenderit',
    date: '12-April-2014',
    rate: 8.99,
    member: 5,
    status: 'approved'
  }, {
    product: '23 voluptate',
    date: '18-November-2014',
    rate: 34.54,
    member: 4,
    status: 'approved'
  }, {
    product: '24 ugiat nulla',
    date: '28-June-2014',
    rate: 55.12,
    member: 1,
    status: 'pending'
  }, {
    product: '25 occaecat cupidatat',
    date: '21-June-2014',
    rate: 99.54,
    member: 3,
    status: 'pending'
  }, {
    product: '26 proident',
    date: '31-December-2014',
    rate: 15.50,
    member: 2,
    status: 'denied'
  }, {
    product: '27 culpa qui',
    date: '1-November-2014',
    rate: 34.05,
    member: 1,
    status: 'pending'
  }, {
    product: '28 Lorem ipsum',
    date: '12-March-2013',
    rate: 12.35,
    member: 1,
    status: 'approved'
  }, {
    product: '29 dolor sit',
    date: '1-January-2011',
    rate: 60.54,
    member: 3,
    status: 'pending'
  }, {
    product: '30 consectetur',
    date: '12-December-2014',
    rate: 12.56,
    member: 1,
    status: 'pending'
  }, {
    product: '31 adipisicing',
    date: '14-November-2014',
    rate: 0.99,
    member: 1,
    status: 'approved'
  }, {
    product: '32 do eiusmod',
    date: '2-November-2014',
    rate: 4.00,
    member: 2,
    status: 'approved'
  }, {
    product: '33 magna aliqua',
    date: '16-February-2014',
    rate: 6.54,
    member: 2,
    status: 'denied'
  }, {
    product: '34 exercitation',
    date: '30-November-2014',
    rate: 60.32,
    member: 2,
    status: 'pending'
  }, {
    product: '35 consequat',
    date: '5-May-2014',
    rate: 5.12,
    member: 1,
    status: 'denied'
  }, {
    product: '36 reprehenderit',
    date: '12-April-2014',
    rate: 8.99,
    member: 5,
    status: 'approved'
  }, {
    product: '37 voluptate',
    date: '18-November-2014',
    rate: 34.54,
    member: 4,
    status: 'approved'
  }, {
    product: '38 ugiat nulla',
    date: '28-June-2014',
    rate: 55.12,
    member: 1,
    status: 'pending'
  }, {
    product: '39 occaecat cupidatat',
    date: '21-June-2014',
    rate: 99.54,
    member: 3,
    status: 'pending'
  }, {
    product: '40 proident',
    date: '31-December-2014',
    rate: 15.50,
    member: 2,
    status: 'denied'
  }, {
    product: '42 culpa qui',
    date: '1-November-2014',
    rate: 34.05,
    member: 1,
    status: 'pending'
  }, {
    product: '43 culpa qui',
    date: '1-November-2014',
    rate: 34.05,
    member: 1,
    status: 'denied'
  }, {
    product: '44 mollit anim',
    date: '3-November-2014',
    rate: 45.00,
    member: 4,
    status: 'approved'
  }];
});
app.filter('startFrom', function() {
  return function(input, start) {
    return input.slice(start);
  };
});
＆＃13; 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid" ng-app="App">
  <div class="row" ng-controller="Controller">
    <div class="col-md-12">
      <div class="box">
        <div class="row">
          <div class="col-md-6">
            Records per page
            <select class="selectpicker" ng-model="pageSize">
              <option value="10">10</option>
              <option value="25">25</option>
              <option value="50">50</option>
              <option value="100">100</option>
            </select>
            Search
            <input type="search" class="form-control input-sm" placeholder="Search item" ng-model="searchitem" style="display: inline-block; width: 145px;">
          </div>
        </div>
        <div class="table-responsive">
          <table class="table table-striped table-hover checkbox-list" style="margin-top:10px;">
            <thead>
              <tr>
                <th><i class="fa fa-square-o fa-lg"></i>
                </th>
                <th>Product</th>
                <th>Date</th>
                <th>Amount</th>
                <th>Member</th>
                <th>Status</th>
                <th>Action</th>
              </tr>
            </thead>
            <tfoot>
              <td colspan="7">
                <div class="row">
                  <div class="col-md-4 text-left">
                    Page <kbd>{{currentpage+1}}/{{totalpages()}}</kbd> Showing <kbd>{{(currentpage*pageSize)+1}}</kbd> to <kbd>{{(currentpage+1)*pageSize}}</kbd> of <kbd>{{items.length}}</kbd> items
                  </div>
                  <div class="col-md-8 text-right">
                    <nav>
                      <ul id="mess-pagination" class="pagination pagination-sm">
                        <li ng-class="{disabled : currentpage == 0}">
                          <a ng-click="prevlist(currentpage);">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                          </a>
                        </li>
                        <li ng-repeat="displaypage in pagelist()" ng-class="{active: displaypage == currentpage}">
                          <a ng-click="showlist(displaypage)">{{displaypage+1}}</a>
                        </li>
                        <li ng-class="{'disabled' : currentpage >= items.length/pageSize - 1}">
                          <a ng-click="nextlist()">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                          </a>
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </td>
            </tfoot>
            <tbody>
              <tr ng-repeat="item in items | startFrom:currentpage*pageSize | limitTo:pageSize | filter:searchitem">
                <td>
                  <label class="check-lab">
                    <input type="checkbox">
                    <span class="fa fa-lg"></span>
                  </label>
                </td>
                <td>
                  <span ng-show="editmode == false">{{item.product}}</span>
                  <input type="text" ng-model="item.product" ng-show="editmode">
                </td>
                <td>
                  <span ng-show="editmode == false">{{item.date}}</span>
                  <input type="date" ng-model="item.date" ng-show="editmode">
                </td>
                <td>
                  <span ng-show="editmode == false">{{item.rate | currency:"£"}}</span>
                  <input type="number" ng-model="item.rate" ng-show="editmode">
                </td>
                <td>
                  <span ng-repeat="user in users" ng-if="user.id === item.member" ng-show="editmode == false">{{user.firstname}} {{user.lastname}}</span>
                  <select ng-show="editmode" ng-model="users[item.member-1].id" ng-options="user.id as user.lastname for user in users"></select>
                </td>
                <td><span class="label" ng-class="{'approved':'label-success', 'pending':'label-default', 'denied':'label-danger'}[item.status]">{{item.status}}</span>
                </td>
                <td>
                  <div class="btn-group btn-group-xs" role="group">
                    <button type="button" class="btn btn-default" ng-hide="editmode" ng-click="editmode = !editmode">
                      <i class="fa fa-pencil"></i>
                    </button>
                    <button type="button" class="btn btn-default" ng-hide="editmode" ng-click="deleteitem($index)">
                      <i class="fa fa-trash-o"></i>
                    </button>
                    <button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
                      <i class="fa fa-save"></i>
                    </button>
                    <button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
                      <i class="fa fa-times"></i>
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题