We can't create a custom pagination structure because we must follow the convention:
<ul class="js-pager__items">
<li><a class="pagination__item" href="#" aria-current="page" aria-label="Current Page, Page 1">1</a></li>
<li><a class="pagination__item" href="#" aria-label="Page 2">2</a></li>
<li><a class="pagination__item" href="#" aria-label="Page 3">3</a></li>
<li><a class="pagination__item" href="#" aria-label="Page 4">4</a></li>
<li><a class="pagination__item" href="#" aria-label="Page 5">5</a></li>
</ul>
It means that we must have `ul.js-pager__items > li > a` toajax pagination work correctly.
But in li tag, we can use a lot of different tags like:
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr>
and Text.
When we build pagination using a different structure than what I showed above it will not work.
Create ajax pagination like on example below:
<ul class="js-pager__items">
<li><div><a class="pagination__item" href="#" aria-current="page" aria-label="Current Page, Page 1">1</a></div></li>
<li><div><a class="pagination__item" href="#" aria-label="Page 2">2</a></div></li>
<li><div><a class="pagination__item" href="#" aria-label="Page 3">3</a></div></li>
<li><div><a class="pagination__item" href="#" aria-label="Page 4">4</a></div></li>
<li><div><a class="pagination__item" href="#" aria-label="Page 5">5</a></div></li>
</ul>
Pagination is not working as expected (ajax is not applied to that pagination).
We should add one more selector `.js-pager__items a` that will give us a possibility to create custom pagination without any issues.
Fixed
10.1 ✨
Last updated
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
Had a look at contrib, doesn't seem to be used/overridden much or at all.
Like lauriii said in slack only problem would be if a view is nested somehow but thankfully there is code to prevent initializing pager in a nested view.
Changing the selector makes sense for flexibility
Automatically closed - issue fixed for 2 weeks with no activity.