Hi, how do I create custom pagination in list view instead of the standard couch pagination in list-view. Having a hard time doing that.

[KK]

Hi,

Normally the <cms:paginator> tag is used as a self-closing tag e.g.

Code: Select all

<cms:paginator adjacents='1' />

The self-closing tag above outputs the full markup of the paginator and you can then tweak the CSS to make it gel with your markup.

However, for use-cases where you need finer control over the paginator's HTML markup, you can use the cms:paginator tag as a 'tag-pair' e.g.

Code: Select all

<cms:paginator adjacents='1'>
    ...
</cms:paginator>

Used as a tag-pair, the tag makes available the following Couch variables that you can then use to craft your own paginator -

Code: Select all

k_crumb_type     // one of these 4: 'next', 'prev', 'ellipsis' or 'page'
k_crumb_disabled // pertinent for only 'next' and 'prev'
k_crumb_current  // pertinent for only 'page'
k_crumb_link
k_crumb_text

As a working example, following snippet has been taken from the code used by Couch v2.0 admin-panel itself (couch/theme/_system/paginator.html) -

Code: Select all

<div class="btn-group">
    <cms:paginator adjacents='1'>
        <cms:if k_crumb_type='prev' >
            <a class="btn btn-pg pg-prev tt<cms:if k_crumb_disabled> disabled</cms:if>" <cms:if k_crumb_disabled>href="#" onClick="return false"<cms:else />href="<cms:show k_crumb_link />"</cms:if> title="Previous"><cms:show_icon 'arrow-thick-left' /></a>
        </cms:if>

        <cms:if k_crumb_type='ellipsis' >
            <a class="btn btn-pg disabled" href="#" onClick="return false">&hellip;</a>
        </cms:if>

        <cms:if k_crumb_type='page' >
            <cms:if k_crumb_current>
                <a class="btn btn-pg btn-primary tt" href="#" onClick="return false" title="<cms:show k_crumb_text />"><cms:show k_crumb_text /></a>
            <cms:else />
                <a class="btn btn-pg tt" href="<cms:show k_crumb_link />" title="<cms:show k_crumb_text />"><cms:show k_crumb_text /></a>
            </cms:if>
        </cms:if>

        <cms:if k_crumb_type='next' >
            <a class="btn btn-pg pg-next tt<cms:if k_crumb_disabled> disabled</cms:if>" <cms:if k_crumb_disabled>href="#" onClick="return false"<cms:else />href="<cms:show k_crumb_link />"</cms:if> title="Next"><cms:show_icon 'arrow-thick-right' /></a>
        </cms:if>
    </cms:paginator>
</div>

You may take it as a reference to create yours.

Hope it helps.

Thanks so much KK for the quick response. A quick question, does the solution given also allow me to use custom age numbers as seen in the example below?

materialize-pagination-1024x271.png (8.29 KiB) Viewed 2148 times

Thank you

[KK]

The solution allows you to 100% use your own design.
The 'k_crumb_text' variable contains the 'page number' (e.g. 1, 2 etc.). Yo may target it to display it howsoever you wish.

Hope it helps.

KK, I can't get your pagination solution to work.
The issue is this, the html file which displays all the blog posts is in the couch snippet folder as directed by your tutorials. I want my blog list-view to display 6 blogs on a page so that when the number of blogs exceed 6, the paginator will allow me to move to the next page so i can see older posts as seen below

Blog list view.JPG (107.46 KiB) Viewed 2137 times

It looks like the solution you gave me is for page-views only. Please help. A complete working example will help

[KK]

The solution that posted above is fully-working code and is meant for the list-view.

In your original code, remove the default <cms:paginator /> and substitute it with the code I gave.
Take a look at the generated source (do a 'view-source' in your browser) and you should see the paginator's markup.

Of course, the markup is from the Couch admin-panel so expects the admin-panel CSS styling. It won't look correct on your page because of the missing CSS styling. But the point here is that the code can be used to output the HTML markup for whatever paginator design you have.

Please tweak it to make it work for you.

Thank you KK I finally got it to work but now my list is staking vertically instead of the horizontal wayI did it

KK I finally got everything to work. It was one stubborn div tag that was causing the problem. Thanks so much for your assistance. Anyway I want to buy a license but it seems you only accept paypal. We don't use Paypal in Ghana, so what do I do

[KK]

I am glad things finally worked

We don't use Paypal in Ghana, so what do I do

Not a problem. Consider a commercial license as complimentary from us