Pagination of cms-loop

[pandaulait]

Is your feature request related to a problem? Please describe.

I would like best practices in creating pagination with pagination like below

The current spear only has the next button and the previous button, and even if you try to implement a page number button, it is difficult to know the total number of contents unless you use the API.

Pattern

[prev] [next]

[prev] [1] [2] ... [5] [6] [7] ... [12] [13] [next]

 [1] [2] ... [5] [6] [7] ... [12] [13]

Describe the solution you'd like

Describe alternatives you've considered

Additional context

[mantaroh]

@pandaulait

Thank you for filing this issue!
We have forget this feature completely.

As your proposal, we should implement this feature. But we need to consider the specification for it. 🤔

[yoannes]

Something like this would be nice.

<ul>
  <li cms-loop cms-content-type="feedback">
    <h1>{%= feedback_[フィールドID1] %}</h1>
    <p>{%= feedback_[フィールドID2] %}</p>
    <img data-src="{%= feedback_[フィールドID3] %}">

    <!-- Add here some kind of pagination -->
    <!-- Using component and maybe auto inject the data, it might be useful to create custom pagination -->
    <Pagination></Pagination>
  </li>
</ul>

<!-- The <Pagination> component -->
<ul>
  <li cms-pagination-loop>
    {%= #pagination_no %}
    {%= #pagination_total %}
    {%= #pagination_link %}
    {%= #pagination_current %}
  </li>
</ul>

[mantaroh]

Sorry It's my mistake. I write the wrong spec here.

an above comment is #123.

[qst-exe]

Not a suggestion, but a question.
How do I specify the Pagination Size(10, 30, 50)? 🤔

[mantaroh]

Not a suggestion, but a question.
How do I specify the Pagination Size(10, 30, 50)? 🤔

Thanks @qst-exe .

It's nice question. In above specification, there are not exist for specifying the pagination size.

How do we have the cms-pagination-size or cms-pagination-perpage like:

<li cms-pagination-loop cms-pagination-size="10">

[qst-exe]

Looks great!
I agree to you! 👌

[yoannes]

as reference

https://vuetifyjs.com/en/components/paginations/#usage
https://www.antdv.com/components/pagination

[oxo-yuta]

Don't we need the id for loop??
Since I thought, Pagination will be outside of the loop, like

<ul>
  <li cms-loop cms-content-type="feedback">
    <h1>{%= feedback_[フィールドID1] %}</h1>
    <p>{%= feedback_[フィールドID2] %}</p>
    <img data-src="{%= feedback_[フィールドID3] %}">

  </li>
</ul>

<Pagination></Pagination>

=========

<!-- The <Pagination> component -->
<ul>
  <li cms-pagination-loop>
    {%= #pagination_no %}
    {%= #pagination_total %}
    {%= #pagination_link %}
    {%= #pagination_current %}
  </li>
</ul>

I think we need id thing to connect Paginnation and Loop 🤔

[qst-exe]

Can we also use cms-pagination-size as a variable?

#126 (comment)

[vladinomo]

Regarding attributes passed to spear tag, we need more parameters to meet demands for showing a variety of UI components.
MUI - Pagination ranges gave me inspiration.

• In some cases, we must show sibling items of a current page.
• Also, we want to define the numbers of items around first/last items.

So, I propose additional attributes.

• siblingCount
• boundaryCount

---

spearタグに渡される属性に関して再現したいUIの多様性の観点から追加した方がいい要素をまとめました。

• siblingCount
• boundaryCount

の2つです。

以下のような用例で草案の内容だと表現できないと思いました。

• 選択中のページの前後のページへのリンクを生成したいとき
• 最初と最後のページに隣り合うリンクを生成/ないし数を指定したいとき

イメージとしてはMUI - Pagination ranges が参考になるかと思います