我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
当前回答
我想添加我的解决方案,与ngRepeat和过滤器,你使用它不使用$watch或切片数组。
您的筛选结果将分页!
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myController', ['$scope', function($scope){
$scope.list= ['a', 'b', 'c', 'd', 'e'];
$scope.pagination = {
currentPage: 1,
numPerPage: 5,
totalItems: 0
};
$scope.searchFilter = function(item) {
//Your filter results will be paginated!
//The pagination will work even with other filters involved
//The total number of items in the result of your filter is accounted for
};
$scope.paginationFilter = function(item, index) {
//Every time the filter is used it restarts the totalItems
if(index === 0)
$scope.pagination.totalItems = 0;
//This holds the totalItems after the filters are applied
$scope.pagination.totalItems++;
if(
index >= (($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage)
&& index < ((($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage) + $scope.pagination.numPerPage)
)
return true; //return true if item index is on the currentPage
return false;
};
}]);
在HTML中,确保在分页过滤器之前对ngRepeat应用过滤器。
<table data-ng-controller="myController">
<tr data-ng-repeat="item in list | filter: searchFilter | filter: paginationFilter track by $index">
<td>
{{item}}
</td>
<tr>
</table>
<ul class="pagination-sm"
uib-pagination
data-boundary-links="true"
data-total-items="pagination.totalItems"
data-items-per-page="pagination.numPerPage"
data-ng-model="pagination.currentPage"
data-previous-text="‹"
data-next-text="›"
data-first-text="«"
data-last-text="»">
</ul>
其他回答
我刚刚做了一个JSFiddle,显示分页+搜索+排序每列使用btford代码:http://jsfiddle.net/SAWsA/11/
Angular-Paging
是个不错的选择
帮助对大型数据集进行分页的指令,同时要求最少的实际分页信息。在这个分页方案中,我们非常依赖于服务器来“过滤”结果。其核心思想是我们只想保存项目的活动“页”——而不是将整个项目列表保存在内存中并在客户端分页。
从Angular 1.4开始,limitTo过滤器也接受第二个可选参数begin
从文档中可以看出:
{{limitTo_expression | limitTo: limit: begin}} 开始 (可选) 字符串|数字 开始限制的索引。作为一个负索引,begin表示从输入的末尾开始的偏移量。默认值为0。
所以你不需要创建一个新的指令,这个参数可以用来设置分页的偏移量
ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage"
我希望我能发表评论,但我不得不在这里留下这个:
苏格兰狗。NET的答案和user2176745对后续版本的重做都很棒,但它们都遗漏了我的AngularJS (v1.3.15)版本的一些问题:
i在$scope.makeTodos中没有定义。
因此,用这个函数替换可以修复它在最近的angular版本中的问题。
$scope.makeTodos = function() {
var i;
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:'todo '+i, done:false});
}
};
前面的消息基本上推荐了如何自己构建分页。如果你和我一样,更喜欢一个完整的指令,我刚刚发现了一个很棒的指令,叫做ngTable。它支持排序、过滤和分页。
这是一个非常干净的解决方案,你所需要的是:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
在控制器中:
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
var start = (params.page() - 1) * params.count();
var end = params.page() * params.count();
$defer.resolve(orderedData.slice( start, end));
}
});
GitHub链接:https://github.com/esvit/ng-table/