2025, Sep 20 01:00

How to Jump to a Specific Pagination Page in Selenium by Editing jQuery data.page and Clicking

Learn a reliable Selenium technique to skip pagination: edit jQuery data.page on a clickable item and trigger its handler to jump to a page without looping.

Jumping across hundreds or thousands of paginated results with Selenium can be painful if the UI only exposes next/prev buttons. When pagination is wired up in JavaScript, a direct click on a number may not be enough, and calling internals like g.show(...) from outside the page often fails. Here’s a practical way to land on a specific page without iterating through every page.

The scenario

The pagination UI is a list of <li> elements, each click-bound by JavaScript. Inside the page’s code, clicking a page item triggers logic that looks like g.show(parseInt(m.data("page"))). The key detail is that the page number isn’t taken from the element’s visible text; it’s read from the jQuery-managed data attached to that <li>.

Why directly invoking g.show fails

A tempting first try is to grab a pagination element and execute something like arguments[0].g.show(...). That doesn’t work because g is a variable created inside setupEvents and only exists in that function’s scope. Executing JavaScript from Selenium runs in the global context, so arguments[0].g is undefined and you get a TypeError instead of navigation.

Inspecting jQuery’s attached data and handlers

Using the browser devtools, inspecting a pagination <li> via $._data($('#stat_pagination > li:nth-child(9)')[0]) reveals that jQuery attached both event handlers and data to the element. The data object includes the current page index, for example data: { page: 7, pageType: "page" }, and the click handler uses that value when deciding which page to show. This means the navigation target comes from jQuery’s data.page, not from the anchor text.

Practical solution with Selenium + jQuery

The shortcut is straightforward: rewrite the data.page of an existing, clickable <li>, then click that <li>. That reuses the page’s own click handler and jumps directly to the desired page number.

target_page = 4200
nav_item_selector = '#stat_pagination > li:nth-child(9)'
nav_item = WebDriverWait(session, 3).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, nav_item_selector))
)
js_patch = "$._data( $('" + nav_item_selector + "')[0]).data.page=" + str(target_page) + ";"
session.execute_script(js_patch)
session.execute_script("arguments[0].click();", nav_item)

This sequence does two things. First, it sets the jQuery-managed data.page on a chosen pagination item to the number you want to jump to. Second, it clicks that same item, triggering the page’s own click handler, which reads the updated data.page and navigates to that page.

What went wrong with the earlier approach

Trying to call arguments[0].g.show(...) fails because g only exists inside setupEvents, where it’s defined and used to wire up click handlers. That scope doesn’t leak out to the global context, so executing that call from Selenium cannot find g and throws an error. Changing the attached data and clicking an element works because it uses the handler that’s already bound to the element.

Why this technique matters

When a site hides its navigation logic behind JavaScript, “just click it” often doesn’t reflect what the code actually uses for state. Here the effective input is the jQuery data.page property. Adjusting that state and letting the existing handler do its work avoids reverse-engineering large scripts or trying to call non-global functions that aren’t accessible from Selenium-executed JavaScript.

Takeaways

For jQuery-driven pagination, the fastest path to a specific page is to inspect the element’s jQuery data, modify the page value you need, and trigger the click. This respects the site’s own event flow and keeps your automation focused and efficient, especially when you need to resume work far into a long list of results.

The article is based on a question from StackOverflow by StoneDogGaul and an answer by StoneDogGaul.