- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在使用 Angular 2 Beta。我还使用 ng2 boostrap 来显示分页。但是我收到一个错误 EXCEPTION: Template parse errors: The pipe 'paginate' could not be found
。
这是我的代码:
下面显示的是 .ts 文件,我在其中动态加载表中的数据。我还包含了来自 ng-bootsrap 的分页指令。
import {Component, EventEmitter, OnInit, Input} from 'angular2/core';
import {pagination, tableContent} from './interface';
import {CORE_DIRECTIVES} from 'angular2/common';
import {PAGINATION_DIRECTIVES} from './ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'table-content',
template: `
<pagination [totalItems]="totalItems" [itemsPerPage]='2' (pageChanged)="pageChanged($event)" [(ngModel)]="currentPage" [maxSize]="maxSize" class="pagination-sm" [boundaryLinks]="true"></pagination>
<thead>
<tr>
<th></th><th></th><th></th><th></th><th></th><th></th><th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="#i of tablecontents" >
<td class="text-centre">
<div class="rm-checkbox">
<input type="checkbox" id="" name="" value="1" tabindex="109">
</div>
</td>
<td>{{i.name}}</td>
<td>{{i.email}}</td>
<td>{{i.type}}</td>
<td>{{i.content}}</td>
<td>{{i.priority}}</td>
<td>{{i.TTL}}</td>
</tr>
</tbody>`,
directives: [PAGINATION_DIRECTIVES, FORM_DIRECTIVES, CORE_DIRECTIVES]
})
export class tablecontent implements OnInit {
constructor() {
this.name = 'Rules';
this.ruleCount = 100;
this.tablecontents = 'table.json'
this.totalItems = tablecontents.length;
this.bigTotalItems = tablecontents.length;
this.currentPage = 4;
this.maxSize = 5;
this.bigCurrentPage = 1;
}
perPageCounts: perPageCount[] = [
{ text: '10', value: 1 },
{ text: '25', value: 2 },
{ text: '50', value: 3 },
{ text: '100', value: 4 }
];
private setPage(pageNo: number): void {
this.currentPage = pageNo;
};
private pageChanged(event: any): void {
console.log('Page changed to: ' + event.page);
console.log('Number items per page: ' + event.itemsPerPage);
};
}
有人可以帮忙吗
最佳答案
另一个选项是自定义分页服务而不是 ng2 bootstrap,我刚刚发布了 this pagination example它使用类似谷歌搜索结果的逻辑。
PagerService 处理分页逻辑:
import * as _ from 'underscore';
export class PagerService {
getPager(totalItems: number, currentPage: number = 1, pageSize: number = 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 = Math.min(startIndex + pageSize - 1, totalItems - 1);
// 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
};
}
}
AppComponent 使用寻呼机服务:
import { Component, OnInit } from '@angular/core';
import * as _ from 'underscore';
import { PagerService } from './_services/index'
@Component({
moduleId: module.id,
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(private pagerService: PagerService) { }
// dummy array of items to be paged
private dummyItems = _.range(1, 151);
// pager object
pager: any = {};
// paged items
pagedItems: any[];
ngOnInit() {
// initialize to page 1
this.setPage(1);
}
setPage(page: number) {
if (page < 1) {
return;
}
// get pager object from service
this.pager = this.pagerService.getPager(this.dummyItems.length, page);
// get current page of items
this.pagedItems = this.dummyItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
}
}
AppComponent HTML 显示分页项和分页器控件:
<div>
<div class="container">
<div class="text-center">
<h1>Angular 2 - Pagination Example with logic like Google</h1>
<!-- items being paged -->
<div *ngFor="let item of pagedItems">Item {{item}}</div>
<!-- pager -->
<ul *ngIf="pager.pages.length" class="pagination">
<li [ngClass]="{disabled:pager.currentPage === 1}">
<a (click)="setPage(1)">First</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === 1}">
<a (click)="setPage(pager.currentPage - 1)">Previous</a>
</li>
<li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
<a (click)="setPage(page)">{{page}}</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
<a (click)="setPage(pager.currentPage + 1)">Next</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
<a (click)="setPage(pager.totalPages)">Last</a>
</li>
</ul>
</div>
</div>
</div>
有关更多详细信息和工作演示,请访问 this post .
关于pagination - Angular2 分页不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35549258/
除了语法之外,在 CakePHP 2 中使用 $this->paginate() 和 $this->Paginator->paginate() 之间有什么区别? 使用其中一种比另一种有什么优势吗? 最
我正在使用 magento 1.7。在我的主页中,每个类别都有分页,分页出现在每个类别的顶部和底部。我想从顶部删除分页并在底部保留分页。 为了包括分页,我使用了以下代码, CMS > 页面 > 设计
我想在 Pagination::slider View 中做一些更改,例如添加类和更改箭头样式。我怎样才能做到这一点? 最佳答案 您可以通过调整 app/config/view.php 中的配置选项来
我是 angularjs 的新手。我正在使用 https://angular-ui.github.io/bootstrap/#/pagination .我有一些问题:style class="pagi
我看过this和this question。但是我仍然无法为存储库方法设置页面调度。不知道我是否受到错误的影响或只是没有正确编写此内容。基本上,我在问是否有人可以提供一个示例,说明如何对通过@Repo
我正在尝试使用 ng2-bootrap 在我的 angular2 应用程序中实现分页。我正在关注 http://valor-software.github.io/ng2-bootstrap/#pagi
我正在使用 flask-paginate 显示一些 rss 提要,分页工作正常,但 pagination.links 的样式不正确,它看起来像一个项目符号列表。在 stackoverflow 上有一个
我正在尝试详细阐述一种在分页模板和非分页模板之间切换的智能方法。 我已经有一个可用的分页器,我正在考虑在它旁边添加一个按钮,上面写着“显示所有结果”,链接到非分页列表,然后从那里会有另一个按钮返回到分
我正在使用 dir-pagination 指令进行分页,它工作正常,但在过滤分页时没有得到更新 下面是我的代码: {{booking.customer
我有一个大查询(在我的查询构建器中)和很多左连接。所以我得到了带有评论和标签等的文章。 假设我有以下 dql: $dql = 'SELECT blogpost, comment, tags FROM
我有一个这样的 ViewSet 来列出用户的数据: class Foo(viewsets.ViewSet): def list(self, request): queryset
我是 Angular 的新手,我想知道是否有任何方法可以将 ngFor 循环递增 2 而不是 1。 我正在尝试在需要将循环递增 2 的分页中实现两个分页。 我得到的对象中包含对象。比方说用户及其地址列
摘要 嗨,大家好!在这个问题中,我想请教您在仅从 material-ui 中导入父组件时如何设置子组件的样式。 问题 我想覆盖从 Material-UI 导入的分页项的类。我只是从 Material-
我正在创建 SharePoint Web 部件,每当我使用新的附加分页组件在 IE 中部署 Web 部件时,我都会收到此错误: 这是我的 MainController.js 文件: (function
无限滚动 next js不工作,相同的代码正常工作 create-react-app 最佳答案 与正常情况不同 React Js , 无限滚动 NextJs有不同的方法。这里我们将使用一个名为 rea
我必须实现基于游标的分页,并且我对如何实现这一点感到有点困惑,因为我的实体的主键不是自动增量,例如 Aerospike。 当比较运算符在我们不使用自动递增的分布式系统中的主键上不可用时,最明显的替代方
我能够使用 skip、limit(和 order by)来获取 UI 中特定页面的内容。例如。呈现页面大小为 m 的第 n 页。 UI 要求跳过 n*m 并限制 m。 但是,UI 想要为所有可能的页面
我有一个Excel工作表,其大小为100行和10列。 如何将这个Excel工作表保存到MS Word文档中,例如: 单词doc中的每个页面必须包含一张来自excel工作表的连续25行的表。 (第一页包
面包屑链接有一个微数据:http://www.data-vocabulary.org/Breadcrumb/ 但是页面链接是否有类似的微数据,例如: [] 最佳答案 是的,还有 pagination
我有存储在图形数据库中的事件。在某些情况下,多个事件被分组并聚合为 1 个事件。 处理后的事件提要可能如下所示: Activity 1 Activity 2 Grouped Activity Ac
我是一名优秀的程序员,十分优秀!