Question

我正在尝试使用ng-table进行分页。它在单页中显示所有数据，而不是对其进行分页。它没有给出任何错误，也显示页码，但内容没有分页。

<body ng-app="AngularApp">
<table class="table table-bordered table-striped table-hover" id="log_table" ng-controller="ControllerCtrl"  ng-table="tableParams">
    <tr ng-repeat="logDetail in data">
      <td>{{logDetail._source.log_datetime[0]}}</td>
      <td>{{logDetail._source.event_src_correlation[0]}}</td>
      <td>{{logDetail._source.content_subType[0]}}</td>
    </tr>
</table>
</body>

angular.module('AngularApp',['ngTable'])
  .controller('ControllerCtrl', function ($scope,$q, ngTableParams) {
    $scope.data=[{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T17:17:56.689"],"event_src_correlation":[1]},"sort":[1]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T19:48:20.459"],"event_src_correlation":[1]},"sort":[2]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T19:49:00.981"],"event_src_correlation":[1]},"sort":[3]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.762"],"event_src_correlation":[1]},"sort":[4]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.763"],"event_src_correlation":[1]},"sort":[5]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.768"],"event_src_correlation":[1]},"sort":[6]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.770"],"event_src_correlation":[1]},"sort":[7]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.784"],"event_src_correlation":[1]},"sort":[8]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:59.943"],"event_src_correlation":[1]},"sort":[9]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:34:00.360"],"event_src_correlation":[1]},"sort":[10]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.149"],"event_src_correlation":[1]},"sort":[11]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.150"],"event_src_correlation":[1]},"sort":[12]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.151"],"event_src_correlation":[1]},"sort":[13]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.152"],"event_src_correlation":[1]},"sort":[14]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.165"],"event_src_correlation":[1]},"sort":[15]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:36.586"],"event_src_correlation":[1]},"sort":[16]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:36.965"],"event_src_correlation":[1]},"sort":[17]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.467"],"event_src_correlation":[1]},"sort":[18]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.468"],"event_src_correlation":[1]},"sort":[19]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.468"],"event_src_correlation":[1]},"sort":[20]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.469"],"event_src_correlation":[1]},"sort":[21]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.476"],"event_src_correlation":[1]},"sort":[22]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:35.917"],"event_src_correlation":[1]},"sort":[23]}];
    $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10           // count per page
        }, {
            total: $scope.data.length, // length of data
            getData: function($defer, params) {
                $defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });      
    });

附加的plunker链接包含代码：http://plnkr.co/edit/kWVNDXG0RlPAqX5lkwhS?p=preview

Answer 1

你错过了$ ng in ng-repeat应该是logdetail in $data而不是logdetail in data

http://plnkr.co/edit/5etPezh3iCHRpYnzllw1?p=preview

<table class="table table-bordered table-striped table-hover" id="log_table" ng-table="tableParams">
  <tr ng-repeat="logDetail in $data">
    <td>{{logDetail._source.log_datetime[0]}}</td>
    <td>{{logDetail._source.event_src_correlation[0]}}</td>
    <td>{{logDetail._source.content_subType[0]}}</td>
  </tr>
</table>

ng-table不分页表内容，仅显示页码

1 个答案: