2017-07-31 100 views
1

分頁按鈕沒有顯示在我的html頁面中。ng-table分頁按鈕不顯示

以下是html頁面。

<div id="home"> 
    <table ng-table="homeVm.customConfigParams" class="table table-condensed table-bordered table-striped" show-filter="true"> 
     <tr ng-repeat="user in $data"> 
      <td title="'Name'" filter="{ name: 'text'}" sortable="'name'"> 
       {{user.name}}</td> 
      <td title="'Age'" filter="{ age: 'number'}" sortable="'age'"> 
       {{user.age}}</td> 
     </tr> 
    </table> 
</div> 

這裏是控制頁面:

function HomeController(NgTableParams) { 
     var vm = this; 
var data = [ {name: "Moroni", age: 50}, {name: "Moroni", age: 50}, /*....*/] 

function createUsingFullOptions() { 
      var initialParams = { 
       count: 10, // initial page size 
      }; 
      var initialSettings = { 
       // page size buttons (right set of buttons in demo) 
       counts: [], 
       // determines the pager buttons (left set of buttons in demo) 
       paginationMaxBlocks: 3, 
       paginationMinBlocks: 2, 
       dataset: data 
      }; 
      return new NgTableParams(initialParams, initialSettings); 
     } 

我需要顯示分頁按鈕。

以下是頁面的輸出。 enter image description here

+0

請提供一個相同的普拉克。 –

回答

0

我猜你錯過了css文件。正如你可以在代碼片段中看到的,分頁工作正常。你

也應該有的數據超過項目每頁數爲分頁 出現。

var app = angular.module("myApp", ["ngTable"]); 
 
var data = [ {name: "Moroni", age: 50}, {name: "Moroni1", age: 50}] 
 
app.controller("myCtrl", function($scope,NgTableParams) { 
 
    
 
    var initialParams = { 
 
       count: 1, // initial page size 
 
      }; 
 
      var initialSettings = { 
 
       // page size buttons (right set of buttons in demo) 
 
       counts: [], 
 
       // determines the pager buttons (left set of buttons in demo) 
 
       paginationMaxBlocks: 3, 
 
       paginationMinBlocks: 2, 
 
       dataset: data 
 
      }; 
 
      $scope.customConfigParams = new NgTableParams(initialParams, initialSettings); 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.css" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<table ng-table="customConfigParams" class="table table-condensed table-bordered table-striped" show-filter="true"> 
 
     <tr ng-repeat="user in $data"> 
 
      <td title="'Name'" filter="{ name: 'text'}" sortable="'name'"> 
 
       {{user.name}}</td> 
 
      <td title="'Age'" filter="{ age: 'number'}" sortable="'age'"> 
 
       {{user.age}}</td> 
 
     </tr> 
 
    </table> 
 
</div>

+0

即使使用了css文件,分頁仍然不顯示。 – Shaam

+0

你有更多的數據比你每頁的數量? –

+0

是的,我確實有大約30個數據,計數設置爲10. 唯一的問題是分頁沒有顯示出來。當我檢查的HTML,我可以看到分頁divs出現,但不在屏幕上 – Shaam