1
ng-table을 사용하여 페이지 매김을 시도하고 있습니다. 모든 데이터를 페이지 매기기가 아닌 단일 페이지로 표시합니다. 오류를주지 않고 페이지 번호를 표시하지만 내용의 페이지 매김이 이루어지지 않습니다.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
오의
logdetail in $data
instad해야 NG-중계기에서 $를 그리워 I 알았어, ng-table은 항상 $ data를 반환하고 나는 반복을 위해 범위 변수 이름을 사용하려고했다. 감사 :) – Prateek