Length of items "after" pagination

[alistairtweedie]

Does anyone know how I would access the length of my data "after" pagination?

I'm looking to do something like this in the UI Total posts: XX

Here's my pagination front matter:

---js
{
    pagination: {
        data: "posts", //.json file in _data folder
        size: 25, // posts wanted per page
        before: function(data) {
            return data.filter(d => d.tags === 'tech'); //filter for tag named tech before paginating
        }
    }
}

This particular example filters the posts data and then paginates so I would be looking for Total tech posts: XX

From the Eleventy docs:

{{ pagination.items.length }} will give me 25 (Size/length of items per page)
{{ pagination.pages.length }} will give me 96 (This is how many pages I have based on my posts data)

Any ideas?

[pdehaan]

Depending on how common this is, it might be easier to create a new collection or tweak the data file to just return tech posts, but this might work.

Here's my Nunjucks template (the syntax might be slightly different if you're using LiquidJS):

---js
{
  title: "HoMe",
  pagination: {
    data: "numbers",
    size: 3,
    before(data) {
      return data.filter(item => item % 3 !== 0);
    }
  },
  numbers: [1,2,3,4,5,6,7,8,9,10]
}
---

<p>Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}</p>
<p>Total posts: {{ pagination.pages | pagination_count }}</p>

<pre>
{{ pagination | inspect | safe }}
</pre>

// .eleventy.js
module.exports = eleventyConfig => {
  eleventyConfig.addFilter("inspect", require("util").inspect);
  eleventyConfig.addFilter("pagination_count", function (arr=[]) {
    return arr.flat().length;
  });
  return {
    dir: {
      input: "src",
      output: "www"
    }
  };
};

OUTPUT

<p>Page 1 of 3</p>
<p>Total posts: 7</p>

<pre>
{
  data: 'numbers',
  size: 3,
  alias: undefined,
  pages: [ [ 1, 2, 4 ], [ 5, 7, 8 ], [ 10 ] ],
  page: {
    previous: null,
    next: [ 5, 7, 8 ],
    first: [ 1, 2, 4 ],
    last: [ 10 ]
  },
  items: [ 1, 2, 4 ],
  pageNumber: 0,
  previousPageLink: null,
  previous: null,
  nextPageLink: '/1/index.html',
  next: '/1/index.html',
  firstPageLink: '/index.html',
  lastPageLink: '/2/index.html',
  links: [ '/index.html', '/1/index.html', '/2/index.html' ],
  pageLinks: [ '/index.html', '/1/index.html', '/2/index.html' ],
  previousPageHref: null,
  nextPageHref: '/1/',
  firstPageHref: '/',
  lastPageHref: '/2/',
  hrefs: [ '/', '/1/', '/2/' ],
  href: { previous: null, next: '/1/', first: '/', last: '/2/' }
}
</pre>

[pdehaan]

Since you're paginating a global _data file, here was my idea for filtering (without the before hook):

// ./src/_data/tech_posts.js
const posts = require("./posts.json");

module.exports = posts.filter(d => d.tags === 'tech'); // filter for tag named tech before paginating

[alistairtweedie]

Thanks for your help looking into this @pdehaan 😃

[alistairtweedie]

I managed to get this working using eleventyComputed 👍 I filtered the global _data file and returned the length

eleventyComputed: {
    postCount: function(data) {
        return data.posts.filter(d => d. tags === 'Tech').length;
    }
},

I was then able to use this in my template:

Total posts: {{ postCount }}

[pdehaan]

@zachleat Is there an easy/easier way of finding the length of a filtered pagination array? Wondering if it makes sense to put some totalItemCount property or something on the pagination object.