Adding Page Numbers (Pagination)

3 posts by 2 authors in: Forums > CMS Builder
Last Post: June 26, 2020   (RSS)

By mark99 - June 24, 2020 - edited: June 24, 2020

So at present I have a fairly basic Previous / Next way of showing page numbers:

    <?php if (!$isp_listRecords): ?>
      <br /><br /><b><u>No records were found!</u></b><br/><br/>
    <?php endif ?>
  <!-- /STEP2: Display Records -->
  
  <!-- STEP3: Display Page Links (Paste anywhere below "Load Record List") -->
    <div align="center" style="font-size:16px;">
    <b>
    <?php if ($isp_listMetaData['prevPage']): ?>
      <a href="<?php echo $isp_listMetaData['prevPageLink'] ?>">&lt;&lt; PREV</a>
    <?php else: ?>
      &lt;&lt; PREV
    <?php endif ?>

    - Page <?php echo $isp_listMetaData['page'] ?> of <?php echo $isp_listMetaData['totalPages'] ?> -

    <?php if ($isp_listMetaData['nextPage']): ?>
      <a href="<?php echo $isp_listMetaData['nextPageLink'] ?>">NEXT &gt;&gt;</a>
    <?php else: ?>
      NEXT &gt;&gt;
    <?php endif ?>
    </b>
    </div>
  <!-- /STEP3: Display Page Links -->

But what I'd like to do is add a link for each specific page number. So instead of having "Page 1 of 2" in the middle of Previous / Next I might instead have "Page 1, 2, 3" etc. and each would be linked to load the specific page if clicked. Likewise the current page you are on would be highlighted in BOLD text. Is there an easy way to do that in CMSB?

By Codee - June 25, 2020

Yes, I have some code below I use on a particular site that does what you are asking. It's a product listing page. There is probably a shorter, more succinct way to write it out in code but I'm not the greatest coder...but I try to be effective. Notice a couple important things: style is handled by css, there are pieces where the "else" shows nothing (but not notated) and is intentional. I'll include a screenshot of what it looks like visually.

<!--begin page number notation-->
<div class="pagenumber">

<?php if ($productsMetaData['invalidPageNum']): ?>

Results page '<?php echo $productsMetaData['page']?>' not found, <a href="<?php echo $productsMetaData['firstPageLink'] ?>">start over &gt;&gt;</a>.<br><br>

<?php elseif (!$productsRecords): ?>

<br>
Those records are not currently available. Please click BACK in your browser.<br><br>

<?php endif ?>

<?php if ($productsMetaData['prevPage']): ?>

<a href="<?php echo $productsMetaData['prevPageLink'] ?>">&lt;&lt;&nbsp;previous&nbsp;</a>

<?php else: ?>

<?php endif ?>

<?php if (@!$_GET['page']): $current_page = "1";

else: $current_page = $_GET['page'];

endif; ?>

<?php foreach (range(1,$productsMetaData['totalPages']) as $page): ?>

<?php if ($page == $current_page): ?>

<span class="bordertext">&nbsp;page&nbsp;<?php echo $page; ?>&nbsp;</span>

<?php else: ?>

<a href="?<?php echo http_build_query(array_merge($_REQUEST, array( 'page' => $page ))) ?>"><?php echo $page; ?></a>

<?php endif ?>

<?php endforeach; ?>

<?php if ($productsMetaData['nextPage']): ?>

<a href="<?php echo $productsMetaData['nextPageLink'] ?>">&nbsp;next&nbsp;&gt;&gt;</a>

<?php else: ?>

<?php endif ?>

</div>
<!--end page number notation-->

The css I used for what you see:


.pagenumber {
font-style: normal;
font-weight: 600;
padding: 10px 0px;
text-align: center;
}

.bordertext {
border-color: #808080;
border-style: solid;
border-width: 2px;
border-radius: 8px;
}

I hope that works, or helps get you in the right direction.

Attachments:

screenshot_numbers.png 122K