ng-tableページングボタンが表示されない

ページのボタンがページに表示されません。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); 
     }

私は改ページボタンを表示する必要があります。

以下はページの出力です。

出典

2017-07-31 Shaam

同じためplunkを提供してください。 –

私はあなたが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>

出典

2017-07-31 07:27:32

cssファイルが使用されていてもページ区切りが表示されません。 – Shaam

ページ数よりも多くのデータがありますか？ –

はい、約30のデータがあり、カウントは10に設定されています。唯一の問題は、ページ番号が表示されないことです。 htmlを調べると、ページ区切りのdivが表示されますが、画面には表示されません。 – Shaam

ng-tableページングボタンが表示されない

答えて

関連する問題