在Primeng P-table中的Paginator禁用下一个按钮

发布于 2025-02-11 21:00:05 字数 428 浏览 1 评论 0原文

如果布尔值为false，我想从P-table的Paginator中禁用下一个按钮。

这是我的p-table：

<p-table #dt id="{{id}}_table" [(value)]="_datasrc" [columns]="cols" [rows]="rowNumber || 10"
         [paginator]="paginator" [pageLinks]="1" ...

您可以看到我的CSS代码，以便禁用该按钮：

::ng-deep 
     .ui-paginator-next {
        visibility: hidden;
    }

如何仅在我的我的布尔值是真的，我想在p-table标签中使用ngclass，但不会影响Paginator

原文

I would like to disable next button from the paginator of p-table if a boolean is false..

Here is my p-table:

<p-table #dt id="{{id}}_table" [(value)]="_datasrc" [columns]="cols" [rows]="rowNumber || 10"
         [paginator]="paginator" [pageLinks]="1" ...

You can see my css code in order to disable the button:

::ng-deep 
     .ui-paginator-next {
        visibility: hidden;
    }

How to enable the css code only if my boolean is true, I want to use ngClass in p-table tag but it won't affect the paginator

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

茶色山野 2025-02-18 21:00:05

像您说的那样，在表中添加一个类，使用ngclass或这样：

[class.hide-next]="hideNext"

在您的CSS Ruleset中，将此类添加到选择器中，例如：

:host ::ng-deep {
    .hide-next .ui-paginator-next {
        visibility: hidden;
    }
}

您可以看到demo 在这里。我已经使用了Primeng演示，并添加了我上面写的内容和Paginator的下一个按钮的切换按钮。
注意：班级名称与您写的略有不同。我认为这是由于版本差异所致。

Add a class to the table, like you said, using ngClass or like this:

[class.hide-next]="hideNext"

In your CSS ruleset, add this class to your selector, like this:

:host ::ng-deep {
    .hide-next .ui-paginator-next {
        visibility: hidden;
    }
}

You can see a demo here. I've used the primeNG demo and added what I've written above and a toggle button for the paginator's next button.
Note: The class names are slightly different than what you wrote. I assume it's due to version differences.

回复收藏 0 原文

~没有更多了~