问题标签 [ngx-pagination]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
11657 浏览

angular - ngx-pagination - 将分页重置为第一页

我将 ngx-pagination 与服务器端分页一起使用。因此,用户输入一些搜索条件并点击搜索按钮。这导致调用服务器以获取结果的第一页。在客户端,我有这段代码来显示分页控件

这按预期工作。显示第一页,并突出显示分页栏中的“1”。

可以说,用户现在点击最后一页。这将突出显示分页栏中的最后一页。到目前为止,一切都按预期工作。

现在用户通过再次单击“搜索”按钮重新执行搜索。这将重新呈现搜索结果。由于是新搜索,服务器返回第一页。但是,分页栏仍然突出显示最后一页。

如何将分页栏重置为某些操作的第一页,例如重新执行搜索。

Angular 版本:4.2.4 ngx 分页版本:3.0.0

0 投票
1 回答
1800 浏览

angular - Angular 4中的ngx-pagination没有totalItems

我依赖于允许分页的 REST 服务,例如: http: //10.127.2.20:23700/v1/telname?filterCriteria.pageSize=25&filterCriteria.pageNumber =1

如果您不提供这些值,则默认值通常为 pageSize 25 和 pageNumber 1。

现在我正在构建一个 Angular4 应用程序来使用此服务,并且遇到了一个问题,我无法访问在我的 ngFor 中填充 totalItems 所需的元数据:

我正在使用@angular/core 4.4.6 和 ngx-pagination 3.0.3

目前我在我的列表组件中对总数进行硬编码,但我想知道是否有可能在我安装的这个模块中更改分页的工作方式。我可以为总数提供无限#,以便用户可以继续点击下一步是无限还是至少直到他们要求的页面中没有任何值?

或者我可以改变<pagination-controls (pageChange)="getPage($event)"></pagination-controls>行为,而不是数字列表,也许有一个显示当前页面的文本框和下一个/上一个按钮只是将该值从 0 更改为文本框中的任何值?

0 投票
0 回答
1480 浏览

angular - Ngx 分页与 API Angular 2 的偏移量

我正在为 Marvel API 制作一些应用程序

https://developer.marvel.com/

请求是显示来自 Marvel API 的字符列表,它只返回 20 个结果,我只能限制 100 个项目,但有超过 1500 个项目。这意味着我需要在 ngx-paginate 上创建带有偏移的角度分页。当我可以从 api 获取所有项目时,我使用了分页,ngx-paginate 会比它更容易,但是当我有这么多结果时,我从来没有用户服务器端分页。这就是我现在所拥有的,没有偏移,只有前 20 个结果。

应用程序,模块.ts

characters.service.ts

字符列表.component.ts

字符列表.component.html

这就是 JSON 的样子

我这里有 1 的限制,你可以看的更好

0 投票
2 回答
2310 浏览

angular - 如何在 Angular 4 ngx 分页中显示每页的记录

我已经在 Angular 4 中安装了 ngx 分页。一切正常。我想每页显示记录。IE。 (Showing: 1 - 10 / 25 ). 我已经尝试过,但我没有得到任何解决方案。你能帮我解决这个问题吗?提前致谢。

0 投票
1 回答
8544 浏览

angular - Angular 5 中的 ngx 分页无法正常工作

我已经使用 laravel 5.5 在我的 angular 5 项目之一中安装了 ngx-pagination。我的 Angular 项目正在使用 Laravel 的 API。我在 HTML、ts 和服务文件中包含以下内容,如下所示:

我的分页运行良好,但分页中当前单击的按钮未激活/未激活(例如蓝色)。

下面是从 Laravel 服务器端接收到的 JSON 值:

0 投票
3 回答
2314 浏览

angular5 - 为表格angular5添加分页

我想为我尝试过 ngx-pagination 的表添加分页,但它似乎不适用于 angular5:只是一个例子

搜索了很多,但发现了这个:


ngx-分页

这个包在导入时给了我错误说:

无法解析符号 NgxPaginationModule

我正在使用angular5 package.json

0 投票
2 回答
1751 浏览

angular5 - 无法解析符号 NgxPaginationModule

我试图在我的 Angular5 项目中使用 NgxPaginationModule无法解析符号 NgxPaginationModule,我按照记录的所有步骤进行操作

app.module.ts

我检查了节点模块和 ngx-pagination 文件夹是否存在。
任何人都可以提出导致此错误的原因吗?

0 投票
1 回答
864 浏览

angularjs - 如何将过滤器添加到 ngx-bootstrap 分页?

此代码与 ngx-bootstrap 分页有关。我想要在此搜索项目。

我想用分页过滤表格我使用了 ng2searchpipe 模块,但它只过滤一个 TR 而不是所有数据。

0 投票
1 回答
461 浏览

angular - 404 ngx-分页角度2

ngx-pagination 模块出现 404 错误:每当我尝试启动 Angular 2 应用程序时,

/ngx-pagination存在于节点模块和 package.json 中。

有人可以帮忙吗?我正在使用快速入门大师。

您的帮助将不胜感激。

App.module 参考...

0 投票
2 回答
5306 浏览

angular - 将 ngx-pagination 实现为自定义组件

我有两个组件:

list.component 和分页组件,在列表组件中我想编写列表记录的逻辑,并且我想使用ngx-pagination npm 包来控制给定列表的分页:

list.component.html:

列表组件.ts

到目前为止,我的服务器端分页工作得非常好。

现在我想使用PaginationControlsDirective这样我可以将分页模板放入 list-pagination.component.html 中,然后我可以根据需要对该模板进行一些更改。但是,当我将此模板逻辑写入 list-pagination.component.html 然后将 pageChange 事件发送到 list.component 时,我没有得到正确的输出,我只收到 1 2 3... 35 > 之类的分页编号甚至无法点击。

我在下面试过:

列表分页.component.html:

列表分页.component.ts:

然后在列表组件中添加分页组件:

然后我只得到下面的分页输出:

分页输出

需要帮助以正确的方式实施它。

谢谢!

我的问题与此类似:

Ngx-pagination 不适用于自定义组件,但我没有得到答案中的解释。OP自己回答了。