Increment <ol> numbers on views paged results

Created on 9 August 2008, almost 16 years ago
Updated 5 May 2024, 13 days ago

Problem/Motivation

Views Style > List contains two options: unordered (i.e bulleted list) and ordered (i.e. numbered list). When the ordered list option is used and the views pager displays a second page, the items in the list are numbered starting from 1, rather than continuing at the next higher number according to the paged results set and number of items per page.

This issue affects the default views-view-list.html.twig template in core, and all core themes including those that do not explicitly override the default template, as well as the core themes that override this template, which currently includes the stable9 theme and the starterkit_theme, and accordingly, any theme that was generated using the starterkit theme.

Steps to reproduce

  1. Install Drupal.
  2. Create at least 3 nodes.
  3. Create a view with a "Page" display to show all nodes.
  4. Use a Style of HTML List > Ordered list.
  5. Set a full pager (or a mini pager) and configure the view to display 2 nodes per page.
  6. Visit the URL of the view page, confirm there are 2 nodes in a numbered list starting at "1".
  7. Click the next page.
  8. Expected result the numbered list should start at "3".

Proposed resolution

Leverage views pager variables current_page and items_per_page to specify an accurate start attribute on the <ol> tag following the pseudo-code logic:

<ol start="{{ current_page * items_per_page + 1}}">

So, for example with 2 items per page, you would expect to see numbered list start in the following way:

On the first page: current_page=0, items_per_page=2 ––> start="1"
On the second page: current_page=1, items_per_page=2 ––> start="3"
On the third page: current_page=2, items_per_page=2 ––> start="5"

Remaining tasks

  • Tests

User interface changes

Paged results in views that use numbered lists will increment properly.

API changes

None

Data model changes

None

Original report by @izmeez

Views 2 is fantastic and keeps getting better and better. Thanks.

I have two questions related to the Style>List options.

There are two options, unordered (which is bullets in the Garland theme) and ordered (which is numbered). If this is the essential difference then maybe calling one bullets and the other numbered would be worth considering. Especially since the order is more a function of the sort.

Secondly, when the ordered (numbered) list option is used and pager displays a second page the items are numbered again from 1 ... rather than continuing at the next higher number. Is there somewhere to change this behaviour?

Thanks very much,

Izzy

πŸ› Bug report
Status

Needs work

Version

11.0 πŸ”₯

Component
ViewsΒ  β†’

Last updated about 1 hour ago

Created by

πŸ‡¨πŸ‡¦Canada izmeez

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¬πŸ‡§United Kingdom robcarr Perthshire, Scotland

    Thanks @jwilson - your template tweak for views-view-list.html.twig in 11 worked really well.

  • Status changed to Active over 1 year ago
  • πŸ‡ͺπŸ‡¨Ecuador jwilson3

    Awesome @robcarr!

    I'm thinking we could reopen this and switch it to the core Drupal issue queue's Views sub-system.

    It was closed years ago by Merlin of Chaos with this reasoning:

    Views can't be held responsible for that. There's no really easy way to change that, I don't think, though maybe adding a style directive via theming I think CSS can tell the ordered list what number to start on.

    However, the approach in #11 proves that this can (and should) be done really easily with an HTML attribute in the template, not in the theme's CSS.

  • πŸ‡³πŸ‡±Netherlands Lendude Amsterdam

    For the initial question in the IS, isn't this something you would use the 'View result counter' field for? That would not get it right on a HTML level but it would show the correct numbers right?

  • πŸ‡ͺπŸ‡¨Ecuador jwilson3

    IS:

    when the ordered (numbered) list option is used and pager displays a second page the items are numbered again from 1 ... rather than continuing at the next higher number. Is there somewhere to change this behaviour?

    #15:

    isn't this something you would use the 'View result counter' field for?

    Sure, you could use view result counter, but not if you want semantic html list. Effectively, if you were to use the ordered (numbered) list option with the view result counter field, then you end up with two sets of numbers, one from the HTML <li> itself, and the other from the field value, and as described above, from page two onward the two values would start to diverge. Using view result counter with numbered list would only require further hacking the numbered list functionality to hide the ordinals/bullets in your theme's CSS. This workaround doesn't do any thing for the viability of the numbered list feature out of the box.

  • Open on Drupal.org β†’
    Environment: PHP 8.2 & MySQL 8
    last update 10 months ago
    Waiting for branch to pass
  • @jwilson3 opened merge request.
  • Open on Drupal.org β†’
    Environment: PHP 8.2 & MySQL 8
    last update 10 months ago
    Waiting for branch to pass
  • Status changed to Needs review 10 months ago
  • Status changed to Needs work 10 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Seems to have a test failure.

    Also could the issue summary be updated please

  • πŸ‡ͺπŸ‡¨Ecuador jwilson3

    I cannot make heads or tails of the error. It seems unrelated.

    1) Drupal\Tests\system\Functional\Theme\ToolbarClaroOverridesTest::testClaroAssets
    Failed asserting that false is true.

    /var/www/html/core/modules/system/tests/src/Functional/Theme/ToolbarClaroOverridesTest.php:141

    Line 141 looks like this:

        // Confirm toolbar templates are loaded from Claro.
        $this->assertTrue($this->getSession()->getPage()->find('css', '.toolbar')->hasClass('claro-toolbar'));
    

    We haven't touched anything remotely related to Drupal toolbar in the Claro theme with the changes here.

  • last update 10 months ago
    29,879 pass
  • πŸ‡¦πŸ‡ΊAustralia pameeela

    This feels like a feature request to me, and something that should be optional. It seems strange to have a page with an ordered list that starts from an arbitrary number? I don't think it's safe to assume that everyone using ordered lists would want it to work that way, which is also supported by the lack of activity on this issue in 15 years.

  • πŸ‡ͺπŸ‡¨Ecuador jwilson3

    I'm having trouble making it all the way to your side to re-classify this as a feature request instead of a bug. (I'd honestly be very interested to see a use case where it makes sense to start ordered, paged output back at 1 on each subsequent page load.) That being said, it is a valid point that this should probably be refactored to be optional, and on by default for new new views, but off by default for existing views, so folks can make a decision whether to opt in on a case-by-case basis.

  • πŸ‡¦πŸ‡ΊAustralia pameeela

    I'd honestly be very interested to see a use case where it makes sense to start ordered, paged output back at 1 on
    each subsequent page load.

    I think I just consider each page distinct, but it sounds like you are considering them states of a single page.

    I will concede I haven’t used the ordered list formatter very much in my 12+ years of Drupaling but just because it was not needed. I use the results summary far more often. Just anecdotal but could be it’s not widely used generally and that’s why there isn't much demand for this.

  • πŸ‡ͺπŸ‡¨Ecuador jwilson3

    I think I just consider each page distinct, but it sounds like you are considering them states of a single page.

    I haven’t used the ordered list formatter very much

    Anecdotally, I've had the need for this several times over the years. So much so that I decided to revive this issue and share my work. I use ordered lists on paged search results, where yes each page in the search results is part of a larger context. This fix is also really helpful when using "Views Load More" or "Views Infinite Scroll" module, where new results are loaded into the current page via ajax without a round trip to the server.

    Keep in mind, I'm implementing designs from UX teams with limited knowledge of Drupal, and this pattern of incrementing the index of give search results across pages just makes sense intuitively. It is also worth noting that this issue was closed 16 years ago by Earl, the original author of Views, which could also explain why not more people are subscribed to this issue. The fact that there were 10 comments on the issue after it was originally closed is a decent indicator that there is a need, however small, for this fix.

    I rely on the method in #11 (the Twig template override) as the go-to solution on many projects because it is more semantic and properly announced and easily navigable by screen readers, as opposed to having to go with the "views result counter" approach in #15 inside each row and using the "Unformatted" Views display format, which then requires more theming effort to restore basic formatting styles that you get for free with an <ol> and <li>.

  • πŸ‡¦πŸ‡ΊAustralia pameeela

    Infinite scroll is certainly a good use case :)

    I guess I just haven't come across designs for numbered search. I sure wish I could say I was implementing designs from teams with knowledge of Drupal, do those exist? LOL. Just lucky I guess!

Production build 0.67.2 2024