Hello, I'm trying to set up pagination on the list view so that it shows the current page, the next couple of pages immediately after the currently opened one and also next/prev buttons. I want to do this using Couch and custom HTML (see attached image) for the pagination bar but don't know if its possible since I can't find any documentation about how to list the page numbers. I'm new to using Couch so any help would be greatly appreciated!

[KK]

Hi

As explained in the docs (http://docs.couchcms.com/concepts/pagination.html), the default output of <cms:paginator> tag can be tweaked using your CSS to match the look you want.

If, however, your use-case demands 100% control over the markup used by the paginator, please see -
viewtopic.php?f=4&t=10796#p27473

Hope it helps.

Hi KK, thank you so much for the quick reply! This worked like a charm!

Also, I'm not sure if it's pertinent to open a new thread for this since its related to the same issue but I got everything working except that I can't get the positioning right. I have the CSS set so that the paginator is displayed on the bottom left but I can't seem to get it to display in any place other than at the end of the last article. I'll attach images of how it looks with just plain HTML and how it looks when I use the paginator tag. Thanks in advance!

[KK]

@PedroC97,
As I mentioned, you can use the Couch tag to output any markup you wish. So, in your case, if the generated HTML is exactly the same as the static version, both should display the same.

But since they are not, it can only mean that the HTML you are generating differs.

Please do a view:source of the dynamic version and compare it with the static one to see where the difference lies.
Once that is clear, we can try to rectify it.

You mentioned -

I can't seem to get it to display in any place other than at the end of the last article.

Usually that is where pagination is placed (sometimes also before the first record) but Couch does not mandate where you decide to put (so long as you use it within the <cms:pages> loop).

Please clarify exactly after which article you need to show the paginator. Also post the code as you are using it now.

Hi, thanks again for the quick reply! I want the paginator to always display on the lower left-hand corner, underneath the last article on the first column. I can't seem to find any differences between the dynamic and HTML versions of the code that would justify this but I could be mistaken since I'm fairly new at this and I probably missed something.

Here is the for the main section of the dynamic version as I'm using it now:
(Edit: I changed the code to the one generated by view:source)

Code: Select all

<main class="page-content">
        <!-- Latest news-->
        <section class="section-70 section-md-114 bg-catskill">
          <div class="shell">
            <div class="range range-xs-center">
              <div class="cell-md-8">
                <div class="range text-sm-left range-xs-center">
                                  <div class="cell-sm-6 cell-sm-6 offset-top-30">
                    <article class="post-news"><a href="http://localhost/article.php?p=13"><img src="http://localhost/couch/uploads/image/volunteer-abroad-programs-2017.jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="http://localhost/article.php?p=13">Five Ways Pre-Med Students Can Spend the Summer</a></h6>
                        <div class="offset-top-20">
                          <p>                               <p>Absent from recent media coverage of student interns &ndash;&nbsp;<a href="http://money.cnn.com/2014/02/28/news/companies/highest-paying-internships/" target="_blank">finance and tech interns for their high pay</a>,&nbsp;<a href="http://nymag.com/daily/intelligencer/2013/06/gawker-interns-join-unpaid-intern-uprising.html" target="_blank">media interns for their lack of pay</a>&nbsp;&ndash; are students interested in medical careers.</p>

<p>Still, summers are as crucial to pre-med students as they are to undergraduates in any competitive field.</p>

<p>Pre-med students who are productively engaged during the summer months have an advantage during the medical school application process, says&nbsp;<a href="http://www.thompsonadvising.com/" target="_blank">Liza Thompson</a>, a medical school admissions consultant&hellip;</p>                                                           </p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">7th Aug, 17</span></div>
                      </div>
                    </article>
                  </div>
                  <!-- Pagination -->
                  <div class="offset-top-60 text-md-left">
                  <nav>
                      <ul class="pagination">
                                              </ul>
                    </nav>
                    </div>
                    <!-- End Pagination -->
                                    <div class="cell-sm-6 cell-sm-6 offset-top-30">
                    <article class="post-news"><a href="http://localhost/article.php?p=12"><img src="http://localhost/couch/uploads/image/neymar-jr-barcelona.jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="http://localhost/article.php?p=12">Neymar Transfer to PSG</a></h6>
                        <div class="offset-top-20">
                          <p>                               <p>If one of the main themes of this summer&#39;s transfer business has been the wild inflation of prices, the upshot has been that players with release clauses bolted into old contracts are suddenly the new place to look for bargains.</p>

<p>On a smaller scale, this meant that Everton could sign the highest-scoring Under-21 player from La Liga, and the top scorer of any bottom-half team, for &pound;5.1m when they secured&nbsp;<a href="http://www.independent.co.uk/sport/football/transfers/everton-sandro-transfer-real-madrid-interest-news-live-a7811606.html">Sandro Ramirez from Malaga.</a></p>

<p>But what now&hellip;</p>                                                           </p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">4th Aug, 17</span></div>
                      </div>
                    </article>
                  </div>
                  <!-- Pagination -->
                  <div class="offset-top-60 text-md-left">
                  <nav>
                      <ul class="pagination">
                                              </ul>
                    </nav>
                    </div>
                    <!-- End Pagination -->
                                    <div class="cell-sm-6 cell-sm-6 offset-top-30">
                    <article class="post-news"><a href="http://localhost/article.php?p=11"><img src="http://localhost/couch/uploads/image/news-07-770x500(1).jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="http://localhost/article.php?p=11">Vivamus Vehicula Pretium</a></h6>
                        <div class="offset-top-20">
                          <p>                               <p>Nullam eleifend tincidunt tristique. Donec vulputate leo tellus, a congue diam vehicula ut. Sed commodo dui imperdiet, congue tortor vitae, bibendum elit. Nam et dolor nec ligula congue tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur lobortis a lorem in fermentum. Ut placerat augue ac euismod auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet tempus consequat. Curabitur sodales semper malesuada. Nullam semper mauris&hellip;</p>                                                           </p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">3rd Aug, 17</span></div>
                      </div>
                    </article>
                  </div>
                  <!-- Pagination -->
                  <div class="offset-top-60 text-md-left">
                  <nav>
                      <ul class="pagination">
                                              </ul>
                    </nav>
                    </div>
                    <!-- End Pagination -->
                                    <div class="cell-sm-6 cell-sm-6 offset-top-30">
                    <article class="post-news"><a href="http://localhost/article.php?p=10"><img src="http://localhost/couch/uploads/image/news-06-770x500(1).jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="http://localhost/article.php?p=10">Nulla Dignissim Efficitur</a></h6>
                        <div class="offset-top-20">
                          <p>                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget tellus elementum, accumsan ligula ut, luctus massa. Nunc mattis ipsum ex, sit amet convallis eros mattis porttitor. Maecenas maximus eu erat eu mollis. Maecenas mauris lectus, placerat at blandit vitae, ultricies eu odio. Integer vel mauris turpis. Fusce scelerisque ipsum eros, nec rutrum lectus dictum nec. Nam blandit nibh quis tortor pretium, ut finibus elit aliquam.</p>

<p>Praesent lacinia, erat eget rutrum placerat, ex metus dapibus sem,&hellip;</p>                                                           </p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">3rd Aug, 17</span></div>
                      </div>
                    </article>
                  </div>
                  <!-- Pagination -->
                  <div class="offset-top-60 text-md-left">
                  <nav>
                      <ul class="pagination">
                                                                                    <li><a class="fa-chevron-left disabled" href="#" onClick="return false" title="Previous"></a></li>
                            
                            
                            
                                                                                
                            
                                                                                                <li class="active"><a href="#" onClick="return false" title="1">1</a></li>
                                                            
                                                                                
                            
                                                                                                <li><a href="http://localhost/article.php?pg=2" title="2">2</a></li>
                                                            
                                                                                
                            
                            
                                                            <li><a class="fa-chevron-right" href="http://localhost/article.php?pg=2" title="Next"></a></li>
                                                                          </ul>
                    </nav>
                    </div>
                    <!-- End Pagination -->
                                  </div>
              </div>
              <!-- aside-->
              <div class="cell-md-4 text-left cell-xs-8 offset-top-85 offset-md-top-0">
                <aside class="inset-md-left-30">
                  <h6 class="text-bold">Search</h6>
                  <div class="text-subline"></div>
                  <div class="offset-top-30">
                                      <!-- RD Search Form-->
                                      <form action="search-results.html" method="GET" class="form-search rd-search form-search-widget">
                                        <div class="form-group">
                                          <div class="input-group">
                                            <input type="text" name="s" autocomplete="off" class="form-search-input  form-control"><span class="input-group-btn">
                                              <button type="submit" class="btn btn-primary"><span class="icon fa-search"> </span></button></span>
                                          </div>
                                        </div>
                                      </form>
                  </div>
                  <div class="offset-top-60">
                    <!-- Archive-->
                    <h6 class="text-bold">Archive</h6>
                    <div class="text-subline"></div>
                    <div class="row offset-top-20">
                      <div class="col-xs-6">
                        <ul class="list list-marked list-marked-primary">
                          <li><a href="article.php">Jun 2016</a></li>
                          <li><a href="article.php">Aug 2016</a></li>
                          <li><a href="article.php">Oct 2016</a></li>
                          <li><a href="article.php">Dec 2016</a></li>
                          <li><a href="article.php">Feb 2017</a></li>
                        </ul>
                      </div>
                      <div class="col-xs-6">
                        <ul class="list list-marked list-marked-primary">
                          <li><a href="article.php">Jul 2016</a></li>
                          <li><a href="article.php">Sep 2016</a></li>
                          <li><a href="article.php">Nov 2016</a></li>
                          <li><a href="article.php">Jan 2016</a></li>
                          <li><a href="article.php">Mar 2017</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="offset-top-60">
                    <!-- Categories-->
                    <h6 class="text-bold">News Categories</h6>
                    <div class="text-subline"></div>
                    <div class="offset-top-20">
                      <ul class="list list-marked list-marked-primary">
                        <li><a href="article.php">Biological Sciences</a></li>
                        <li><a href="article.php">Medical</a></li>
                        <li><a href="article.php">Physical Sciences</a></li>
                        <li><a href="article.php">Research</a></li>
                        <li><a href="article.php">Volunteering</a></li>
                      </ul>
                    </div>
                  </div>
                </aside>
              </div>
            </div>
          </div>
        </section>
      </main>

And this is the code for the HTML-only version:

Code: Select all

<main class="page-content">
        <!-- Latest news-->
        <section class="section-70 section-md-114 bg-catskill">
          <div class="shell">
            <div class="range range-xs-center">
              <div class="cell-md-8">
                <div class="range text-sm-left range-xs-center">
                  <div class="cell-sm-6">
                    <article class="post-news"><a href="article.php"><img src="images/blog/news-01-370x240.jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="article.php">Liberal Arts Colleges Rankings</a></h6>
                        <div class="offset-top-20">
                          <p>Liberal Arts Colleges emphasize undergraduate education and award at least half of their degrees in the liberal arts fields of study.</p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">2 days ago</span></div>
                      </div>
                    </article>
                  </div>
                  <div class="cell-sm-6 offset-top-30 offset-sm-top-0">
                    <article class="post-news"><a href="article.php"><img src="images/blog/news-02-370x240.jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="article.php">10 Law Schools Where the Most Accepted Students Enroll</a></h6>
                        <div class="offset-top-20">
                          <p>At these schools, at least 42 percent of accepted students enrolled in fall 2015, U.S. News data show.</p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">2 days ago</span></div>
                      </div>
                    </article>
                  </div>
                  <div class="cell-sm-6 offset-top-30">
                    <article class="post-news"><a href="article.php"><img src="images/blog/news-04-370x240.jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="article.php">
                            Ways Parents and Counselors Can
                            Help Students Earn Scholarships</a></h6>
                        <div class="offset-top-20">
                          <p>Securing scholarships can be stressful, but parents and counselors can serve as a resource.</p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">2 days ago</span></div>
                      </div>
                    </article>
                  </div>
                  <div class="cell-sm-6 offset-top-30">
                    <article class="post-news"><a href="article.php"><img src="images/blog/news-05-370x240.jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="article.php">
                            Consider MBA Programs That
                            Offer Summer Prep</a></h6>
                        <div class="offset-top-20">
                          <p>Summer preparatory programs offered through schools allow students to get a head start on making connections and building skills.</p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">2 days ago</span></div>
                      </div>
                    </article>
                  </div>
                  <div class="cell-sm-6 offset-top-30">
                    <article class="post-news"><a href="article.php"><img src="images/blog/news-03-370x240.jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="article.php">5 Ways to Pay for Community College</a></h6>
                        <div class="offset-top-20">
                          <p>Many community colleges offer promise programs, which offer tuition-free awards to eligible students – mainly to students with Pell grant eligibility.</p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">2 days ago</span></div>
                      </div>
                    </article>
                  </div>
                  <div class="cell-sm-6 offset-top-30">
                    <article class="post-news"><a href="article.php"><img src="images/blog/news-06-370x240.jpg" width="370" height="240" alt="" class="img-responsive"></a>
                      <div class="post-news-body">
                        <h6><a href="article.php">Studying in the United States</a></h6>
                        <div class="offset-top-20">
                          <p>International students increasingly want to come to the United States for college or graduate school.</p>
                        </div>
                        <div class="post-news-meta offset-top-20"><span class="icon icon-xs mdi mdi-calendar-clock text-middle text-madison"></span><span class="text-middle inset-left-10 text-italic text-black">2 days ago</span></div>
                      </div>
                    </article>
                  </div>
                </div>
                <div class="offset-top-60 text-md-left">
                  <!-- Pagination-->
                  <nav>
                    <ul class="pagination">
                      <li class="disabled"><span aria-label="Previous"><span aria-hidden="true" class="fa-chevron-left"></span></span></li>
                      <li class="active"><span>1</span></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
                      <li><a href="#" aria-label="Next"><span aria-hidden="true" class="fa-chevron-right"></span></a></li>
                    </ul>
                  </nav>
                </div>
              </div>
              <!-- aside-->
              <div class="cell-md-4 text-left cell-xs-8 offset-top-85 offset-md-top-0">
                <aside class="inset-md-left-30">
                  <h6 class="text-bold">Search</h6>
                  <div class="text-subline"></div>
                  <div class="offset-top-30">
                                      <!-- RD Search Form-->
                                      <form action="search-results.html" method="GET" class="form-search rd-search form-search-widget">
                                        <div class="form-group">
                                          <div class="input-group">
                                            <input type="text" name="s" autocomplete="off" class="form-search-input  form-control"><span class="input-group-btn">
                                              <button type="submit" class="btn btn-primary"><span class="icon fa-search"> </span></button></span>
                                          </div>
                                        </div>
                                      </form>
                  </div>
                  <div class="offset-top-60">
                    <!-- Archive-->
                    <h6 class="text-bold">Archive</h6>
                    <div class="text-subline"></div>
                    <div class="row offset-top-20">
                      <div class="col-xs-6">
                        <ul class="list list-marked list-marked-primary">
                          <li><a href="article.php">Jun 2016</a></li>
                          <li><a href="article.php">Aug 2016</a></li>
                          <li><a href="article.php">Oct 2016</a></li>
                          <li><a href="article.php">Dec 2016</a></li>
                          <li><a href="article.php">Feb 2017</a></li>
                        </ul>
                      </div>
                      <div class="col-xs-6">
                        <ul class="list list-marked list-marked-primary">
                          <li><a href="article.php">Jul 2016</a></li>
                          <li><a href="article.php">Sep 2016</a></li>
                          <li><a href="article.php">Nov 2016</a></li>
                          <li><a href="article.php">Jan 2016</a></li>
                          <li><a href="article.php">Mar 2017</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="offset-top-60">
                    <!-- Categories-->
                    <h6 class="text-bold">Categories</h6>
                    <div class="text-subline"></div>
                    <div class="offset-top-20">
                      <ul class="list list-marked list-marked-primary">
                        <li><a href="article.php">Biological Sciences</a></li>
                        <li><a href="article.php">Medical</a></li>
                        <li><a href="article.php">Physical Sciences</a></li>
                        <li><a href="article.php">Research</a></li>
                        <li><a href="article.php">Volunteering</a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="offset-top-60">
                    
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </aside>
              </div>
            </div>
          </div>
        </section>
      </main>

[KK]

Could you please do a 'view-source' of the generated page and post the relevant HTML?
It is the generated HTML that we'd want to compare with its static counterpart.

Oh sorry about that! I edited the previous post and changed the first code entry to the generated HTML

[trendoman]

I have put both codes into separate files and my diff tool (WinMerge) shows that there are some discrepancies and extra tags. Could you please post your template file with couch code here?