Question

分页按钮没有显示在我的html页面中。

下面是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);
        }

我需要显示分页按钮。

以下是页面的输出。

Answer 1

我猜你错过了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>

ng-table分页按钮不显示

1 个答案: