How to handle change in UUI-pagination

Bram

12/01/2023, 9:27 AM

I'm currently rewriting a package to Lit and I'm struggling with adding pagination. The uui-library shows that a change event handler can be added. However, in the event that this event handler uses I cannot find which page I've clicked on, can anyone tell me how I can find out which page in the pagination was clicked?

Jacob Overgaard

12/01/2023, 10:22 AM

You need to look up the element that was clicked on and read the

current

property.

Jacob Overgaard

12/01/2023, 10:23 AM

You can get that from the event

Jacob Overgaard

12/01/2023, 10:23 AM

Copy code

const currentPage = (e.target as UUIPaginationElement).current

Bram

12/01/2023, 12:30 PM

Thanks! That did the trick 🙂

Bram

12/01/2023, 2:24 PM

I've got another issue with the pagination. I'm going to add sorting to a table that has pagination. When I sort data it would be nice to programatically tell the pagination to go back to page 1. Is there a way to push the pagination to a certain page?

Jacob Overgaard

12/01/2023, 2:27 PM

Update the

current

property on the element

Jacob Overgaard

12/01/2023, 2:29 PM

If you are using Typescript, you can use Lit's @query decorator to cache the element:

Copy code

@query('uui-pagination', true)
private _paginator?: UUIPaginationElement;

onSort() {
  this._paginator?.current = 1;
}

Bram

12/01/2023, 2:48 PM

You're a magician! Thanks again

39 Views

Previous Next

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!