Question

尝试在表上实现分页。但是Uib-pagination没有显示，但元素能够在gui上进行检查。

我哪里出错

控制器

 //all rows to display on main page  from build_req table
 $scope.allrows = function() { //need to enable this
     service.getAllBulidReqData().then(function(response) {
         if (response.status == "success") {
             $scope.rowcollection = response.data;
             outsidescope();
         } else {
             location.path("/")
         }
     })
 }
 $scope.allrows();
 //Pagination for table 
 function outsidescope() {
     // console.log($scope.rowcollection)  
     $scope.totalItems = $scope.rowcollection.length;
     $scope.itemsPerPage = 1
     $scope.currentPage = 1;

     $scope.pageCount = function() {
         return Math.ceil($scope.rowcollection.length / $scope.itemsPerPage);
     };

     $scope.$watch('currentPage + itemsPerPage', function() {
         var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
             end = begin + $scope.itemsPerPage;

         $scope.rowcollection = $scope.rowcollection.slice(begin, end);
     });
 }

HTML

  <table init-table="rowCollection"   class="table table-striped  table-hover table-bordered" ng-class="fulltable? 'full-width' : 'custom-width'" >       
      <caption>All Requests
      <div class= "pull-right"> 
      <button class="btn-sm btn-default btn-filter" ng-click= "filtershow()"><span class="glyphicon glyphicon-filter" ></span> Filter</button>  
      </div>
      <div class="form-group pull-right" style= "margin-left :-350px;width:28%;margin-bottom:0px">
         <div class="input-group" ng-show="filter">
           <div class="input-group-addon" style="background-color: #428BCA;">
           <span class="fa fa-search" style="color:white;"></span>
           </div>
        <input type="text" class="col-sm-4 control-label" placeholder="What you looking for?" required ng-model="search">            
     </div> 
     </div>
     </caption> 
         <thead>
            <tr class ="filters">
               <th>Id</th>
               <th  class="col-sm-2">Abstract</th>
               <th class="col-md-3">RTC Workspace</th>
               <th class="col-md-2">Requester </th>
               <th class="col-md-2">Customer </th>
               <th class="col-md-2">Build Start</th>
               <th class="col-md-1">Build Status</th>
               <th class= "col-md-1">Actions</th>
            </tr>
         </thead>
         <tbody>
            <tr ng-repeat="row in rowcollection.slice().reverse()|filter:search:false" >
               <td>{{row.build_id}}</td>
               <td >{{row.abstract}}</td>
               <td>{{row.rtc_workspace}}</td>
               <td>{{row.user_name}}</td>
               <td>{{row.customer_name}}</td>
               <td>{{row.build_start}}</td>
               <td ng-class="{'color-red': row.build_status === 'Rejected', 
                              'color-orange': row.build_status === 'Approval Pending', 
                              'color-green': row.build_status.trim() === 'Approved',
                              'color-blue': row.build_status === 'BUILD STARTED'}">
                  {{row.build_status}} </td>
               <td>
                  <button type="button" class="btn-sm btn-primary" ng-if = "row.build_status === 'Approval Pending'" ng-disabled = "name == row.user_name" ng-click="approve(row)">Approve</button>
                  <button type="button" class="btn-sm btn-primary" ng-if = "row.build_status !== 'Approval Pending'" ng-click="approve(row)">View </button>
               </td>
            </tr>
         </tbody>
         <tfooter>
         <tfoot>
      </table>     
 <uib-pagination total-items="totalItems" ng-model="currentPage" class="pagination-sm" ng-change="pageChanged()" boundary-links ="true"></uib-pagination>

模块注入

我注入了ui bootstrap作为模块，我只链接了ui-bootstrap tpls 2.5 js文件

截图

链接

  <script src="/js/angular.min.js"></script>
<script src="/js/ui-bootstrap-2.5.0.min.js"></script>
<script src="/js/angular-local-storage.min.js"></script>
<script src="/js/angular-ui-router.min.js"></script>   
<script src="/js/angular-noty.js"></script>
<script src="/js/angular-route.js"></script>
<script src="/js/smarttable.js"></script>

Answer 1

在ui.bootstrap的2.5.0版本中，分页指令仅限于属性（用于元素或属性）。我不确定他们什么时候改变了它，最近我升级到2.5版本时它就崩溃了。

从

更改您的html代码

<uib-pagination total-items="totalItems" ... ></uib-pagination>

类似

<div uib-pagination total-items="totalItems" ... ></div>

分页没有出现在屏幕上

1 个答案: