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

问题描述

试图在表格上实现分页.但是 Uib-pagination 不显示但元素能够在 gui 上检查.

我哪里错了

控制器

//build_req 表中显示在主页面上的所有行$scope.allrows = function() {//需要开启这个service.getAllBulidReqData().then(function(response) {如果(响应.状态==成功"){$scope.rowcollection = response.data;外部作用域()；} 别的 {location.path("/")}})}$scope.allrows();//表格分页函数外作用域(){//console.log($scope.rowcollection)$scope.totalItems = $scope.rowcollection.length;$scope.itemsPerPage = 1$scope.currentPage = 1;$scope.pageCount = function() {返回 Math.ceil($scope.rowcollection.length/$scope.itemsPerPage);};$scope.$watch('currentPage + itemsPerPage', function() {var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),结束 = 开始 + $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>所有请求<div class="pull-right"><button class="btn-sm btn-default btn-filter" ng-click="filtershow()"><span class="glyphicon glyphicon-filter" ></span>过滤器

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

<input type="text" class="col-sm-4 control-label" placeholder="你在找什么?需要 ng-model="搜索">

</caption><头><th>Id</th><th class="col-sm-2">摘要</th><th class="col-md-3">RTC 工作区</th><th class="col-md-2">请求者</th><th class="col-md-2">客户</th><th class="col-md-2">构建开始</th><th class="col-md-1">构建状态</th><th class="col-md-1">动作</th></tr></thead><tr ng-repeat="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 === '审批待定','颜色-绿色':row.build_status.trim() === '批准'，'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=批准(行)">批准</按钮><button type="button" class="btn-sm btn-primary" ng-if = "row.build_status !== 'Approval Pending'" ng-click="approve(row)">查看 </按钮></td></tr></tbody><脚><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/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 版时，它对我来说坏了.

更改您的 html 代码

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

类似的东西

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

trying to implement pagination on the table . But Uib-pagination not displaying but the element is able to inspect on the gui .

Where am i going wrong

Controller

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

Module injection

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

SCreenshot

Links

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

解决方案

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.

Change your html code from

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

to something like

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

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