Pagination tidak muncul di layar

mencoba menerapkan pagination pada tabel. Tetapi paginasi Uib tidak ditampilkan tetapi elemennya dapat diperiksa di gui.

Dimana kesalahanku

Pengontrol

 //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>

Injeksi modul

Saya menyuntikkan ui bootstrap sebagai modul dan saya hanya menautkan file ui-bootstrap tpls 2.5 js

Tangkapan Layar masukkan deskripsi gambar di sini

Tautan

  <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>

person Sri Sai Ramya T    schedule 24.05.2017    source sumber


Jawaban (1)


Dalam versi 2.5.0 dari ui.bootstrap, arahan penomoran halaman dibatasi hanya untuk atribut (dulu berupa elemen atau atribut). Saya tidak yakin kapan mereka mengubahnya, itu rusak ketika saya meningkatkan ke versi 2.5 baru-baru ini.

Ubah kode html Anda dari

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

untuk sesuatu seperti

<div uib-pagination total-items="totalItems" ... ></div>
person leisurelarry    schedule 28.06.2017