Angularjs 如何使用Angular.js实现分页/表格布局?
假设我收到一个包含15个以上对象的对象文字,并且我需要以一个好的布局显示它们(不是全部显示在一行中),控制行何时中断/页面何时结束的最有效方法是什么 现在我在表行上使用ng repeat,结果是一个长而薄的表,只有一列 编辑以进行澄清。可以在对象/多个参数中包含对象。这是我的目标:Angularjs 如何使用Angular.js实现分页/表格布局?,angularjs,angular-ui,angularjs-ng-repeat,Angularjs,Angular Ui,Angularjs Ng Repeat,假设我收到一个包含15个以上对象的对象文字,并且我需要以一个好的布局显示它们(不是全部显示在一行中),控制行何时中断/页面何时结束的最有效方法是什么 现在我在表行上使用ng repeat,结果是一个长而薄的表,只有一列 编辑以进行澄清。可以在对象/多个参数中包含对象。这是我的目标: $scope.zones = [ {"name": "Zone 1", "activity": "1"}, {"name": "Zone 2", "
$scope.zones = [
{"name": "Zone 1",
"activity": "1"},
{"name": "Zone 2",
"activity": "1"},
{"name": "Zone 3",
"activity": "0"},
{"name": "Zone 4",
"activity": "0"},
{"name": "Zone 5",
"activity": "0"},
{"name": "Zone 6",
"activity": "0"},
{"name": "Zone 7",
"activity": "1"},
{"name": "Zone 8",
"activity": "0"},
{"name": "Zone 9",
"activity": "0"},
{"name": "Zone 10",
"activity": "0"},
{"name": "Zone 11",
"activity": "1"},
{"name": "Zone 12",
"activity": "1"},
{"name": "Zone 13",
"activity": "0"},
{"name": "Zone 14",
"activity": "0"},
{"name": "Zone 15",
"activity": "1"},
];
我将使用table并在控制器中实现分页,以控制显示的内容和移动到下一页的按钮。也许对你有帮助
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
<th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="description">Description <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
<th class="field3">Field 3 <a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
<th class="field4">Field 4 <a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
<th class="field5">Field 5 <a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length)"
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.field3}}</td>
<td>{{item.field4}}</td>
<td>{{item.field5}}</td>
</tr>
</tbody>
</table>
身份证件
{{item.id}
{{item.name}
{{item.description}
{{item.field3}}
{{item.field4}
{{item.field5}}
fiddle示例中的$scope.range应为:
$scope.range = function (size,start, end) {
var ret = [];
console.log(size,start, end);
if (size < end) {
end = size;
if(size<$scope.gap){
start = 0;
}else{
start = size-$scope.gap;
}
}
for (var i = start; i < end; i++) {
ret.push(i);
}
console.log(ret);
return ret;
};
$scope.range=函数(大小、开始、结束){
var-ret=[];
日志(大小、开始、结束);
如果(大小<结束){
结束=大小;
if(size这是我的解决方案。@Maxim Shoustin的解决方案在排序方面有一些问题。我还将整个问题包装到一个指令中。唯一的依赖项是UI.Bootstrap.pagination,它在分页方面做得很好
这是你的电话号码
以下是我使用此解决方案的原因:
因为我使用了:ng repeat=“obj in objects | filter:paginate”
来过滤行,所以它更简洁了一点
在这里,我通过在服务器端+视图端进行更多调整,解决了我的angularJS分页问题
你可以检查代码,这样会更有效率。
我所要做的就是将两个值放入start number和end number,它将表示返回的json数组的索引
这是有角度的
var refresh = function () {
$('.loading').show();
$http.get('http://put.php?OutputType=JSON&r=all&s=' + $scope.CountStart + '&l=' + $scope.CountEnd).success(function (response) {
$scope.devices = response;
$('.loading').hide();
});
};
如果仔细查看$scope.CountStart和
$scope.CountStart是我随api传递的两个参数
这是“下一步”按钮的代码
$scope.nextPage = function () {
$('.loading').css("display", "block");
$scope.nextPageDisabled();
if ($scope.currentPage >= 0) {
$scope.currentPage++;
$scope.CountStart = $scope.CountStart + $scope.DevicePerPage;
$scope.CountEnd = $scope.CountEnd + $scope.DevicePerPage;
refresh();
}
};
这是“上一步”按钮的代码
$scope.prevPage = function () {
$('.loading').css("display", "block");
$scope.nextPageDisabled();
if ($scope.currentPage > 0) {
$scope.currentPage--;
$scope.CountStart = $scope.CountStart - $scope.DevicePerPage;
$scope.CountEnd = $scope.CountEnd - $scope.DevicePerPage;
refresh();
}
};
如果页码为零,我的上一个按钮将被停用
$scope.nextPageDisabled = function () {
console.log($scope.currentPage);
if ($scope.currentPage === 0) {
return false;
} else {
return true;
}
};
带有papping、排序和过滤器的表格
请参阅的完整示例这是我找到的最简单的分页示例!最简单的分页即插即用解决方案
您需要用自定义指令替换ng repeat
<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>
这就是分页所需的全部内容
可能对某人有帮助。最简单的方法是使用slice。您可以对slice进行管道化处理,并为希望显示的部分数据提及开始索引和结束索引。以下是代码:
HTML
教程参考资料:请发布一个示例,说明“15+个对象的对象文字”看起来像。它是一个对象数组?还是一个包含子对象的对象?等等。你想要一种流布局来显示你的项目吗?如果是这样,我不确定这是一个角度的问题,没有角度,你会怎么做?我在使用固定高度div和float:left
或display:inline block
之前就做过。我不明白你的问题与分页有什么关系……如果你能提供更多你想要完成的事情的细节,或者你的一些代码“不起作用”,这会有所帮助JSFIDLE不工作。有人帮我运行此演示。@user2249160您在哪里打开的?在chrome it中works@dman是的,因为id被定义为字符串。我将其更改为数字并更改了Fiddle链接。Thanks@dman是的,在这个演示中,我一次加载所有内容。但是从每个服务器加载并不是很多事情page@MaximShoustin:设置$scope.itemsPerPage=50;
会导致一个奇怪的结果。从-2到2的页面。搜索页面后不会重新排列。我该怎么做?我几乎已经完成了自己的编码-我现在已经放弃了使用它。dirPagination似乎得到了所有网站的赞许。它功能强大,具有免费搜索和排序以及更改t的功能运行时每页的项目数,正如您所说的简单易用。高度推荐编辑确实非常有用。效果非常好。Angular 7的更新文档在这里
<div align="center">
<dir-pagination-controls
max-size="100"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
<script src="./js/dirPagination.js"></script>
angular.module('userApp',['angularUtils.directives.dirPagination']);
<table>
<thead>
...
</thead>
<tbody>
<tr *ngFor="let row of rowData | slice:startIndex:endIndex">
...
</tr>
</tbody>
</table>
<nav *ngIf="rowData" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" (click)="updateIndex(0)" aria-label="Previous">
<span aria-hidden="true">First</span>
</a>
</li>
<li *ngFor="let i of getArrayFromNumber(rowData.length)" class="page-item">
<a class="page-link" (click)="updateIndex(i)">{{i+1}}</a></li>
<li class="page-item">
<a class="page-link" (click)="updateIndex(pageNumberArray.length-1)" aria-label="Next">
<span aria-hidden="true">Last</span>
</a>
</li>
</ul>
</nav>
...
public rowData = data // data you want to display in table
public paginationRowCount = 100 //number of records in a page
...
getArrayFromNumber(length) {
if (length % this.paginationRowCount === 0) {
this.pageNumberArray = Array.from(Array(Math.floor(length / this.paginationRowCount)).keys());
} else {
this.pageNumberArray = Array.from(Array(Math.floor(length / this.paginationRowCount) + 1).keys());
}
return this.pageNumberArray;
}
updateIndex(pageIndex) {
this.startIndex = pageIndex * this.paginationRowCount;
if (this.rowData.length > this.startIndex + this.paginationRowCount) {
this.endIndex = this.startIndex + this.paginationRowCount;
} else {
this.endIndex = this.rowData.length;
}
}