我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
当前回答
这是一个纯javascript解决方案,我把它包装成一个Angular服务来实现像谷歌搜索结果那样的分页逻辑。
在http://codepen.io/cornflourblue/pen/KVeaQL/上的CodePen工作演示
细节和解释在这篇博文中
function PagerService() {
// service definition
var service = {};
service.GetPager = GetPager;
return service;
// service implementation
function GetPager(totalItems, currentPage, pageSize) {
// default to first page
currentPage = currentPage || 1;
// default page size is 10
pageSize = pageSize || 10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
// create an array of pages to ng-repeat in the pager control
var pages = _.range(startPage, endPage + 1);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}
其他回答
我希望我能发表评论,但我不得不在这里留下这个:
苏格兰狗。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});
}
};
下面解决方法相当简单。
<pagination
total-items="totalItems"
items-per-page= "itemsPerPage"
ng-model="currentPage"
class="pagination-sm">
</pagination>
<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) ">
下面是jsfiddle示例
下面的代码将有助于在后端提供自定义分页角repeat。
你的数据会在
$scope.myticketIssuesData = [];
$scope.allticketIssuesData = [];
var jiraapp = angular.module('jiraapp', ['ui.bootstrap']); jiraapp.controller('JiraController', ['$scope', '$http', '$window','$location', function JiraController($scope, $http, $window,$location) { $scope.myticketIssuesData = []; $scope.allticketIssuesData = []; $scope.jiraIssue = {}; $scope.RequesterType = []; $scope.loading = false; $scope.showerror = false; $scope.alert = {}; $scope.maxSize = 10; $scope.totalCount = 0; $scope.pageIndex = 0; $scope.startIndex = 0; $scope.pageSizeSelected = 10; $scope.maxallSize = 10; $scope.totalallCount = 0; $scope.pageallIndex = 0; $scope.startallIndex = 0; $scope.pageallSizeSelected = 10; $scope.getUserTickets = function() { $scope.loading = true; $http({ method: 'GET', url: 'http://localhost:53583/api/Jira/getUserTickets?assignee='+$scope.loc+'&startAt='+ $scope.startIndex +'&maxResults='+$scope.pageSizeSelected, headers: { "Accept": "application/json", "Access-Control-Allow-Origin": "http://localhost:8080", "crossDomain": "true", } }).then(function successCallback(response) { $scope.myticketIssuesData = response.data.issues; $scope.totalCount = response.data.total; $scope.loading = false; }, function errorCallback(response) { $scope.loading = false; }); } $scope.getrequestType = function(){ $http({ method: 'GET', url: 'http://localhost:53583/api/Jira/getrequestType', headers: { "Accept": "application/json", "Access-Control-Allow-Origin": "http://localhost:8080", "crossDomain": "true", } }).then(function successCallback(response) { $scope.RequesterType = response.data.values; }, function errorCallback(response) { }); } $scope.getDropDown = function(){ $scope.getrequestType(); } $scope.initialize = function (item) { $scope.getUserTickets(); $scope.getDropDown(); } $scope.initialize(); $scope.pageChanged = function () { if($scope.pageIndex == 0) $scope.startIndex = 0; else if($scope.pageIndex == 1) $scope.startIndex = 0; else $scope.startIndex = (($scope.pageIndex-1) * $scope.pageSizeSelected); $scope.getUserTickets(); }; $scope.pageallChanged = function () { if($scope.pageallIndex == 0) $scope.startallIndex = 0; else if($scope.pageallIndex == 1) $scope.startallIndex = 0; else $scope.startallIndex = (($scope.pageallIndex-1) * $scope.pageallSizeSelected); $scope.getAllTickets(); }; $scope.changeallPageSize = function () { $scope.pageallIndex = 0; $scope.getAllTickets(); }; $scope.getAllTickets = function() { $scope.loading = true; $http({ method: 'GET', url: 'http://localhost:53583/api/Jira/getAllTickets?startAt='+ $scope.startallIndex +'&maxResults='+$scope.pageallSizeSelected, headers: { "Accept": "application/json", "Access-Control-Allow-Origin": "http://localhost:8080", "crossDomain": "true", } }).then(function successCallback(response) { $scope.allticketIssuesData = response.data.issues; $scope.totalallCount = response.data.total; $scope.loading = false; }, function errorCallback(response) { $scope.loading = false; }); } }]); <html ng-app="jiraapp"> <head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="/angular.min.js"></script> <script src="/jira.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.js"></script> <script src="/ui-bootstrap-tpls-0.13.4.min.js"></script> <!-- this is important --> <style type="text/css"> #loading { position: fixed; top: 50%; left: 50%; margin-top: -5em; margin-left: -10em; } .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px } .pagination>li { display: inline } .pagination>li>a, .pagination>li>span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd } .pagination>li:first-child>a, .pagination>li:first-child>span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px } .pagination>li:last-child>a, .pagination>li:last-child>span { border-top-right-radius: 4px; border-bottom-right-radius: 4px } .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { z-index: 3; color: #23527c; background-color: #eee; border-color: #ddd } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { z-index: 2; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7 } .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd } .pagination-lg>li>a, .pagination-lg>li>span { padding: 10px 16px; font-size: 18px; line-height: 1.3333333 } .pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span { border-top-left-radius: 6px; border-bottom-left-radius: 6px } .pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span { border-top-right-radius: 6px; border-bottom-right-radius: 6px } .pagination-sm>li>a, .pagination-sm>li>span { padding: 5px 10px; font-size: 12px; line-height: 1.5 } .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span { border-top-left-radius: 3px; border-bottom-left-radius: 3px } .pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span { border-top-right-radius: 3px; border-bottom-right-radius: 3px } .pager { padding-left: 0; margin: 20px 0; text-align: center; list-style: none } .pager li { display: inline } .pager li>a, .pager li>span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px } .pager li>a:focus, .pager li>a:hover { text-decoration: none; background-color: #eee } .pager .next>a, .pager .next>span { float: right } .pager .previous>a, .pager .previous>span { float: left } .pager .disabled>a, .pager .disabled>a:focus, .pager .disabled>a:hover, .pager .disabled>span { color: #777; cursor: not-allowed; background-color: #fff } </style> </head> <body ng-controller="JiraController"> <div class="col-sm-12"> <div class="row" style="background: #09c;"> <div style="margin-left: auto; margin-right: auto;"> <img src="/logo.png" height="80"> <span class="d-none d-sm-inline" style="color: white; font-size: 4rem; vertical-align: middle; font-family:'Source Code Pro'">Jira</span> </div> </div> <div class="row"> <div class="col-sm-12"> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-myticket-tab" data-toggle="tab" href="#nav-myticket" role="tab" aria-controls="nav-myticket" aria-selected="true" ng-click="getUserTickets()">My Ticket</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-myticket" role="tabpanel" aria-labelledby="nav-myticket-tab"> <div class="col-sm-12" style="margin:10px"> <div id="loading" ng-show="loading"> <img src="spinner.gif"> </div> <table ng-show="!loading" class="table table-striped table-bordered table-hover tabel-condensed"> <thead> <tr> <td>Key</td> <td>Priority</td> <td>Summary</td> <td>Assignee</td> <td>Status</td> <td>Due Date</td> </tr> </thead> <tbody> <tr ng-repeat="data in myticketIssuesData"> <td> <a href={{data.fields.customfield_10023._links.web}} target="_blank"> {{data.key}} </a> </td> <td>{{data.fields.priority.name}}</td> <td>{{data.fields.summary}}</td> <td>{{data.fields.assignee.displayName}}</td> <td>{{data.fields.status.name}}</td> <td>{{data.fields.duedate}}</td> </tr> </tbody> <tfoot> <tr> <td align="center" colspan="6"> <!-- <span class="form-group pull-left page-size form-inline"> <select id="ddlPageSize" class="form-control control-color" ng-model="pageSizeSelected" ng-change="changePageSize()"> <option value="5">5</option> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> </select> </span> --> <div class="pull-right"> <pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"> </pagination> <a style="margin-left: 640px;" class="btn btn-primary">Page: {{pageIndex}} / {{numPages}}</a> </div> </td> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </body> </html>
从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"
老问题,但因为我认为我的方法有点不同,不那么复杂,我将分享这一点,希望除了我之外的人觉得它有用。
我发现一个简单而又小的分页解决方案是将一个指令与一个使用相同作用域变量的过滤器结合起来。
为了实现这一点,你在数组上添加过滤器,并像这样添加directiv
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>
p_Size和p_Step是作用域变量,可以在作用域中自定义,否则p_Size的默认值为5,p_Step为1。
当分页中的步骤发生变化时,p_Step将被更新,并将触发cust_pagination过滤器进行新的过滤。 cust_pagination过滤器然后根据p_Step值对数组进行切片,如下所示,只返回分页部分中选择的活动记录
var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;
在这个活塞中查看完整的解决方案