分页未显示在屏幕上 [英] Pagination is not showing up on screen

问题描述

试图在桌子上实现分页.但是不会显示Uib分页，而是该元素能够在gui上进行检查.

trying to implement pagination on the table . But Uib-pagination not displaying but the element is able to inspect on the 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文件

I injected ui bootstrap as module and i linked only ui-bootstrap tpls 2.5 js file

SCreenshot

链接

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

推荐答案

在ui.bootstrap版本2.5.0中，分页指令仅限于仅属性(用于元素或属性).我不确定他们何时更改它，但是最近我升级到2.5版时，它对我来说就崩溃了.

In version 2.5.0 of ui.bootstrap the pagination directive is restricted to attribute-only (used to be element or attribute). I'm not sure when they changed it, it broke for me when I upgraded to version 2.5 recently.

从更改您的html代码

Change your html code from

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

类似

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

这篇关于分页未显示在屏幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！