How to disable pagination in Prime NG?

Viewed 1454

After a lot of searches, I didn't get the proper answer to disable primeng pagination.

1 Answers

This feature is not directly available in PrimeNG paginator. I have used small hack to achieve it:

// Once data has been assigned to the table
this.data = mydataFromService;

setTimeout(()=>{
    $(".ui-paginator-element").addClass('disabled'); 
    // You can use index if you want to disable a particular button/link
}, 0);

// In some CSS file
.disabled {
    pointer-events: none; // mandatory: prevents from click event to trigger
    cursor: not-allowed; // optional: if you want cursor to indicate 'disabled'
}

Note:
custom class is used instead of ui-state-disabled as it overwrites a particular scenario.

scenario:
you are on first page - First or < indicator is by default disabled using class ui-state-disabled.

now once disabled if you try to enable the pagination, will have to remove 'ui-state-disabled' like this $(".ui-paginator-element").removeClass('disabled');

This will enable the First or < element which is wrong. So its better to use custom class instead.

Related