Angular-UI分页缺少最后一页

时间:2016-02-25 08:13:47

标签: javascript jquery angularjs pagination

我有一张表需要进行分页,旧的寻呼机是不可接受的。所以我需要使用Pagination指令。我已经根据文档和各种教程实现了它,但它对我不起作用。

我在数组中有20个项目,页面大小设置为每页7个项目,所以我应该有3个页面吗?但该指令仅包含第1页,第2页和第3页缺失。请帮忙!!

这是html:

mysql> SELECT STR_TO_DATE('May 1, 2013','%M %d, %Y');
        -> '2013-05-01'

这是控制器:

<div class="row">
        <div class="col-xs-10">
          <div class="row" >
            <div class="col-xs-1">
              <input type="checkbox" ng-model="vm.isSelectedAll" ng-click="vm.checkAll()" />    
            </div>
            <div class="col-xs-3">Customer Name</div>
            <div class="col-xs-3">Customer PO#</div>
            <div class="col-xs-3">Part Number</div>
            <div class="col-xs-2">Delivery Date</div>
          </div>
          <div class="row" ng-repeat="qd in vm.qdPos | filter: query | orderBy: order | startFrom: (vm.currentPage - 1) * vm.pageSize | limitTo: vm.pageSize">
            <div class="col-xs-12">
              <div class="row" style="padding-top:10px; padding-bottom:5px; border-top:1px solid black">
                <div class="col-xs-1"><input type="checkbox" ng-model="qd.Selected" style="vertical-align:middle"/></div>
                <div class="col-xs-3">{{qd.customerName}}</div>
                <div class="col-xs-3">{{qd.customerPoNumber}}</div>
                <div class="col-xs-3">{{qd.partNumber}}</div>
                <div class="col-xs-2">{{qd.deliveryDate | date : 'dd-MMM-yyyy'}}</div>
              </div>
              <div class="row" style="padding-top:5px; padding-bottom:10px;">
                <div class="col-xs-1"></div>
                <div class="col-xs-5">
                  <a ng-click="showPoDetails(qd.id)">Details</a>&nbsp;|&nbsp;<a ng-click="addRemark(qd.id)">Quick Remark</a>
                </div>
                <div class="col-xs-1 right">Qty:</div>
                <div class="col-xs-3">{{qd.quantity}}</div>
                <div class="col-xs-2">
                  <span class="label" ng-class="vm.getStatusLabelColor(qd.status)">{{qd.status}}</span>
                </div>
              </div>        
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-10">
          <uib-pagination total-items="vm.qdPos.length" 
                          item-per-page="vm.pageSize"
                          ng-model="vm.currentPage"  
                          boundary-link="true" 
                          previous-text="&lsaquo;" next-text="&rsaquo;" 
                          first-text="&laquo;" last-text="&raquo"
                          class="pagination-sm"></uib-pagination>
        </div>
      </div>

0 个答案:

没有答案