Change the page size of a paginator with an external script

Question

I am using a web platform that displays a table with 10 lines by page. There is a paginator at the bottom that allows you to choose between 10, 25, 50, and 100 lines. I always set it to 100 to have a better overview. However, each time I log in, I have to change it again. I would like to see 100 by default.

Since I don't have access to the code of the platform, I can only change this with a client-side script. Therefore I was thinking about a Tampermonkey script. In fact, I already wrote one to highlight rows of the table based on their content.

The selector is mat-paginator, so I assume the website is written with Angular Material. Therefore, I think I cannot just find a value with a selector and update it. Is there a way to do this?

Answer 1

You need to check whether the pagination element with text 100 is on the dom. and you need to click it.

I have written a rough script. You need to go through the dom to find the correct class names for option and select elements.

const paginator = document.querySelector('mat-paginator');
        if (paginator) {
            const selectElement = paginator.querySelector('select-class');
            if (selectElement) {
                selectElement.click();
                setTimeout(() => {
                    const options = document.querySelectorAll('option-class');
                    options.forEach(option => {
                        if (option.innerText.trim() === '100') {
                            option.click();
                        }
                    });
                }, 100);
            }
        }

You can use Tampermonkey chrome extension to run the script every time you visit that particular url.