The following tutorial is based on the "Doclister: Paginated Navigation - Basic" tutorial.
Minor changes have been made to the templates and additional elements have been integrated, for functionality and end-user friendliness.
The first change that has been made here ist the "&id=", lets try and keep away from using one and the same ID all of the time, this will hopefully ensure that there are no conflicts with other snippets using Doclisters core.
Remember: Cached or Uncached - you need to check this yourself as it depends on your setup.
The full working call:
<p>[*longtitle*]: Page [+pageoverview.current+] of [+pageoverview.totalPages+]</p>
[!DocLister?
&id=`pageoverview`
&parents=`[*id*]`
&showParent=`0`
&display=`12`
&depth=`0`
&sortBy=`menuindex`
&sortDir=`ASC`
&ownerTPL=`@CODE:<ol>[+dl.wrap+]</ol>`
&tpl=`@CODE:<li><a href="[+url+]">[+menutitle+]</a></li>`
&paginate=`pages`
&PrevNextAlwaysShow=`1`
&pageLimit=`10`
&pageAdjacents=`2`
&TplWrapPaginate=`@CODE:<nav class="pagination"><ul>[+wrap+]</ul></nav>`
&TplFirstP=`@CODE:<li class="first"><a href="[+link+]"><i class="fas fa-angle-double-left"></i></a></li>`
&TplFirstI=`@CODE:<li class="first"><i class="fas fa-angle-double-left"></i></li>`
&TplPrevP=`@CODE:<li class="previous"><a href="[+link+]"><i class="fas fa-angle-left"></i></a></li>`
&TplPrevI=`@CODE:<li class="previous"><i class="fas fa-angle-left"></i></li>`
&TplNextP=`@CODE:<li class="next"><a href="[+link+]"><i class="fas fa-angle-right"></i></a></li>`
&TplNextI=`@CODE:<li class="next"><i class="fas fa-angle-right"></i></li>`
&TplLastP=`@CODE:<li class="last"><a href="[+link+]"><i class="fas fa-angle-double-right"></i></a></li>`
&TplLastI=`@CODE:<li class="last"><i class="fas fa-angle-double-right"></i></li>`
&TplPage=`@CODE:<li><a href="[+link+]">[+num+]</a></li>`
&TplCurrentPage=`@CODE:<li class="active">[+num+]</li>`
&TplDotsPage=`@CODE:<li>...</li>`!]
[+pageoverview.pages+]
<p>Viewing [+pageoverview.from+] - [+pageoverview.to+] of <strong>[+pageoverview.count+]</strong></p>
The result
Please note that the call / tutorial was made on a live website, as such the text has been blocked out in the above image
Important
All parameters that are used to render results for this specific Doclister call must have the same ID name prefixed to the output parameter:
[+pageoverview.current+]
[+pageoverview.totalPages+]
[+pageoverview.from+]
[+pageoverview.to+]
[+pageoverview.count+]
Changes to the call compared to the original tutorial:
- Page [+pageoverview.current+] - current is the current paginated page
- of [+pageoverview.totalPages+] - totalPages is the total number of paginated pages
- id - name has changed from list to pageoverview
- display - changed from 10 to 12
- ownerTPL - now uses a numbered list
- the majority of templates have changed, by adding CSS classes and FontAwesome icons
- Viewing [+pageoverview.from+] - displays the current amount starting from 1 e.g from pages 1, 2 + 3 = 25 from 36
- [+pageoverview.to+] of - displays the total sum of child docs for all pages shown up to this page e.g total from pages 1, 2 + 3 = 36
- [+pageoverview.count+] - placeholder for the total amount of results (total amount of active child documents)
Parameter Notes
As of writing this tutorial there are no official documents to be found for the "from", "to" and "count" parameters.
The original code was found in a variety of examples that users in the Russian forum had posted.
They have now been combined together and used in this format - this is relevant for those converting old Ditto calls, as Ditto has basically the same, but built in.
Top Tip
If you would like to treat your search engine to a new title on a per page basis, add the Doclister ouput parameters to your HTML title tag:
<title>[*pagetitle*] - Page [+pageoverview.current+] of [+pageoverview.totalPages+] (from of [+pageoverview.count+])</title>