2022-02-20 15:15:38 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
2022-12-17 10:12:40 +01:00
< link rel = "stylesheet" href = "../../../static/styles.css?h=dff0aaad" >
2022-02-20 15:15:38 +01:00
< link rel = "stylesheet" href = "../../../static/pygments.css" >
< link rel = "shortcut icon" href = "../../../static/favicon.png?h=fa09bedd" >
< title > Pagination | Documentation | Lektor Static Content Management System< / title >
< / head >
< body class = "default" >
< nav class = "navbar navbar-inverse navbar-static-top" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "../../../" > Lektor< / a >
< / div >
< div id = "navbar" class = "collapse navbar-collapse" >
< ul class = "nav navbar-nav" >
< li > < a href = "../../../downloads/" > Download< / a > < / li >
< li class = "active" > < a href = "../../" > Documentation< / a > < / li >
< li > < a href = "../../../showcase/" > Showcase< / a > < / li >
< li > < a href = "../../../plugins/" > Plugins< / a > < / li >
< li > < a href = "../../../community/" > Community< / a > < / li >
< li > < a href = "../../../blog/" > Blog< / a > < / li >
< / ul >
< / div >
< / div >
< / nav >
< div class = "body-wrapper" >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-3" >
< ul class = "tree-nav nocontent" >
< li > < a href = "../../" > Welcome< / a > < / li >
< li > < a href = "../../what/" > What is Lektor< / a >
< li > < a href = "../../installation/" > Installation< / a >
< li > < a href = "../../quickstart/" > Quickstart< / a >
< li > < a href = "../../project/" > Project< / a >
< li > < a href = "../../content/" > Content< / a >
< li > < a href = "../../templates/" > Templates< / a >
< li > < a href = "../../themes/" > Themes< / a >
< li > < a href = "../" > Guides< / a >
< ul >
< li > < a href = "../blog/" > Blog< / a >
< li > < a href = "../categories/" > Categories< / a >
< li > < a href = "../disqus/" > Disqus Comments< / a >
< li > < a href = "../error-pages/" > Error Pages< / a >
< li > < a href = "../page-order/" > Page Order< / a >
< li class = "active" > < a href = "./" > Pagination< / a >
< ul > < / ul >
< li > < a href = "../portfolio/" > Portfolio Sites< / a >
< li > < a href = "../redirects/" > Redirects< / a >
< li > < a href = "../single-page/" > Single-Page< / a >
< li > < a href = "../sitemap/" > Sitemap< / a >
< li > < a href = "../webpack/" > Webpack< / a >
< / ul >
< li > < a href = "../../deployment/" > Deployment< / a >
< li > < a href = "../../plugins/" > Plugins< / a >
< li > < a href = "../../models/" > Data Modelling< / a >
< li > < a href = "../../cli/" > Command Line< / a >
< li > < a href = "../../api/" > API< / a >
< li > < a href = "../../search/" > Search< / a >
< / ul >
< div class = "visible-md-block visible-lg-block" >
< h4 > This Page< / h4 >
< ul class = "toc" >
< li > < a href = "#configuring-pagination" > Configuring Pagination< / a > < / li >
< li > < a href = "#selecting-the-children" > Selecting the Children< / a > < / li >
< li > < a href = "#rendering-a-pagination" > Rendering a Pagination< / a > < / li >
< li > < a href = "#using-the-macro" > Using the Macro< / a > < / li >
< / ul >
< / div >
< / div >
< div class = "col-sm-9 doc-styling" >
< h1 > Pagination< / h1 >
< ul class = page-meta >
< / ul >
< p > When you have too many items to show on one page you might want to use
Lektor's built-in pagination support. It allows a page to show only a
subset of the child records per page.< / p >
< h2 id = "configuring-pagination" > Configuring Pagination< / h2 > < p > First you need to enable the pagination in the model. Primarily you need
to enable the pagination and set how many items show up on a page. Just
add this to the parent model:< / p >
2023-01-02 03:39:06 +01:00
< div class = "hll" > < pre > < span > < / span > < span class = "k" > [pagination]< / span >
< span class = "na" > enabled< / span > < span class = "w" > < / span > < span class = "o" > =< / span > < span class = "w" > < / span > < span class = "s" > yes< / span >
< span class = "na" > per_page< / span > < span class = "w" > < / span > < span class = "o" > =< / span > < span class = "w" > < / span > < span class = "s" > 10< / span >
2022-02-20 15:15:38 +01:00
< / pre > < / div >
< h2 id = "selecting-the-children" > Selecting the Children< / h2 > < p > Now that you have the pagination configured you need to iterate only over
the children of an active page in your template rather than the children of the
entire record. This can be done by changing < code > this.children< / code > to
< code > this.pagination.items< / code > :< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "cp" > {%< / span > < span class = "k" > for< / span > < span class = "nv" > child< / span > < span class = "k" > in< / span > < span class = "nv" > this.pagination.items< / span > < span class = "cp" > %}< / span >
2022-02-20 15:15:38 +01:00
...
< span class = "cp" > {%< / span > < span class = "k" > endfor< / span > < span class = "cp" > %}< / span >
< / pre > < / div >
< h2 id = "rendering-a-pagination" > Rendering a Pagination< / h2 > < p > Lastly we need to render the pagination somehow. This is up to you. The
handy < a href = "../../api/db/record/pagination/" class = "ref" > pagination object< / a > has a few
very useful attributes that can be used for rendering. It's recommended
to make a < code > macros/pagination.html< / code > that looks something like this so that
you can render the same pagination everywhere:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "cp" > {%< / span > < span class = "k" > macro< / span > < span class = "nv" > render_pagination< / span > < span class = "o" > (< / span > < span class = "nv" > pagination< / span > < span class = "o" > )< / span > < span class = "cp" > %}< / span >
2022-02-20 15:15:38 +01:00
< span class = "p" > < < / span > < span class = "nt" > div< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " pagination" < / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > if< / span > < span class = "nv" > pagination.has_prev< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > a< / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " < / span > < span class = "cp" > {{< / span > < span class = "nv" > pagination.prev< / span > < span class = "o" > |< / span > < span class = "nf" > url< / span > < span class = "cp" > }}< / span > < span class = "s" > " < / span > < span class = "p" > > < / span > < span class = "ni" > & laquo;< / span > Previous< span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > else< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " disabled" < / span > < span class = "p" > > < / span > < span class = "ni" > & laquo;< / span > Previous< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > endif< / span > < span class = "cp" > %}< / span >
| < span class = "p" > < < / span > < span class = "nt" > strong< / span > < span class = "p" > > < / span > < span class = "cp" > {{< / span > < span class = "nv" > pagination.page< / span > < span class = "cp" > }}< / span > < span class = "p" > < /< / span > < span class = "nt" > strong< / span > < span class = "p" > > < / span > |
< span class = "cp" > {%< / span > < span class = "k" > if< / span > < span class = "nv" > pagination.has_next< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > a< / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " < / span > < span class = "cp" > {{< / span > < span class = "nv" > pagination.next< / span > < span class = "o" > |< / span > < span class = "nf" > url< / span > < span class = "cp" > }}< / span > < span class = "s" > " < / span > < span class = "p" > > < / span > Next < span class = "ni" > & raquo;< / span > < span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > else< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " disabled" < / span > < span class = "p" > > < / span > Next < span class = "ni" > & raquo;< / span > < span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > endif< / span > < span class = "cp" > %}< / span >
< span class = "p" > < /< / span > < span class = "nt" > div< / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > endmacro< / span > < span class = "cp" > %}< / span >
< / pre > < / div >
< h2 id = "using-the-macro" > Using the Macro< / h2 > < p > Now that you have that set up, you can use the macro like this:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "cp" > {%< / span > < span class = "k" > from< / span > < span class = "s2" > " macros/pagination.html" < / span > < span class = "k" > import< / span > < span class = "nv" > render_pagination< / span > < span class = "cp" > %}< / span >
2022-02-20 15:15:38 +01:00
< span class = "cp" > {%< / span > < span class = "k" > if< / span > < span class = "nv" > this.pagination.pages< / span > < span class = "o" > > < / span > < span class = "m" > 1< / span > < span class = "cp" > %}< / span >
< span class = "cp" > {{< / span > < span class = "nv" > render_pagination< / span > < span class = "o" > (< / span > < span class = "nv" > this.pagination< / span > < span class = "o" > )< / span > < span class = "cp" > }}< / span >
< span class = "cp" > {%< / span > < span class = "k" > endif< / span > < span class = "cp" > %}< / span >
< / pre > < / div >
< div class = "comment-box" >
< h2 > Comments< / h2 >
< div id = "disqus_thread" > < / div >
< script >
var disqus_config = function() { this.page.identifier = "/docs/guides/pagination"; this.page.url = "https://www.getlektor.com/docs/guides/pagination/"; };
(function() {
var d = document, s = d.createElement('script');
s.src = '//lektordocumentation.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
< / script >
< noscript >
Please enable JavaScript to view the < a href = "https://disqus.com/?ref_noscript"
rel="nofollow">comments powered by Disqus.< / a >
< / noscript >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "bottomsummary" >
< div class = "container" >
< / div >
< / div >
< footer >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-4 icon-bar" >
< a href = "https://github.com/lektor/lektor/" title = "Lektor on GitHub"
>< i class = "fa fa-github" > < / i > < / a >
< a href = "https://github.com/lektor/lektor/issues/" title = "Report Issues for Lektor"
>< i class = "fa fa-bug" > < / i > < / a >
< a href = "https://twitter.com/getlektor" title = "Find Lektor on Twitter"
>< i class = "fa fa-twitter" > < / i > < / a >
< a href = "https://gitter.im/lektor/lektor" title = "Chat on Gitter"
>< i class = "fa fa-comment" > < / i > < / a >
< a href = "https://github.com/lektor/lektor-website/tree/master/content/docs/guides/pagination/contents.lr" title = "View source for this page" > < i class = "fa fa-code" > < / i > < / a >
< / div >
< div class = "col-sm-8" >
< a href = "../../../license/" > License & Copyright< / a > •
< a href = "../../../contact/" > Contact< / a > •
Made with < i class = "fa fa-fw fa-heart" title = "Heart" > < span hidden > Heart< / span > < / i > in Carinthia
< / div >
< / div >
< / div >
< / footer >
2024-06-22 13:39:56 +02:00
< script type = text/javascript src = "../../../static/app.js?h=250c2aed" charset = "utf-8" > < / script >
2022-02-20 15:15:38 +01:00
< script >
((window.gitter = {}).chat = {}).options = {
room: 'lektor/lektor',
activationElement: null
};
document.write('< button class = "js-gitter-toggle-chat-button" > Toggle Chat< / button > ');
var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
if (dnt != "1" & & dnt != "yes") {
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-70822533-1', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
} else {
console.debug("Respecting Do-Not-Track, not running analytics.");
}
< / script >
< script async src = 'https://www.google-analytics.com/analytics.js' > < / script >
< script async defer id = "github-bjs" src = "https://buttons.github.io/buttons.js" > < / script >
< script > ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] , p = /^http:/ . test ( d . location ) ? 'http' : 'https' ; if ( ! d . getElementById ( id ) ) { js = d . createElement ( s ) ; js . id = id ; js . src = p + '://platform.twitter.com/widgets.js' ; fjs . parentNode . insertBefore ( js , fjs ) ; } } ( document , 'script' , 'twitter-wjs' ) ; < / script >
< script src = "https://sidecar.gitter.im/dist/sidecar.v1.js" async defer > < / script >
< / body >
< / html >
