> >

ProcessWire的完全自定义分页

后端开发ProcessWire 371

在以前我曾经在《》做过一个PW的手动分页方法，但是当时没注意到的是这个分页结果出来了，但是有个Bug就是无法识别当前页，也就是说使用了内置的renderPager函数依旧是有问题的，今天又把这个分页功能重新全手动写了一遍，彻底抛弃了系统非常不灵活的生成分页的函数，目前测试没啥问题了。

一些变量说明，需要修改或使用课直接查找：

  • $limit = 12; 默认每页显示的数量
  • $pagerHTML 最终渲染的分页pagination的html代码
  • $matches = $pages->find("parent={$page}, start=$start, limit=$limit, sort=-id"); 这个就不用解释太多了，这里是作为分类页使用的情况，也可以在搜索页使用，对应修改selector就可以了
  • $min = (($pageNum - 5) > 0) ? $pageNum - 5 : 1; 这里是设定当前页的前五页，也可以在这里更改，比如当前是第10页，那么这里控制的是显示5-9页码，而不是1-9全部页码
  • $max = $pageNum + 5; 这里是设定当前页的后五页，比如当前是第10页，一共是20页，这里控制的是显示11-15页，而不是11-20页。
  • 由于完全脱离了系统原生分页函数，所以这里非常灵活控制，可非常方便修改html元素。

下面是核心代码：

$pagerHTML = "";
$pagerData = array();

$limit = 12; 

$start = $input->get->page ? ($input->get->page - 1) * $limit : 0;
$matches = $pages->find("parent={$page}, start=$start, limit=$limit, sort=-id");
$total = $matches->getTotal();

$pagerData['info'] = $matches->getPaginationString('Items');
$pagerData['page'] = $matches->getPaginationString('Page', true);

if($total) {
  // there are results present
  $numPaginations = ceil($total / $limit);
  $pageNum = $input->get->page ? : 1;

  $nextNum = $pageNum + 1;
  $prevNum = ($pageNum) > 1 ? $pageNum - 1 : 1;

  $min = (($pageNum - 5) > 0) ? $pageNum - 5 : 1;
  for($n = $min; $n <= $pageNum; $n++){
    $style = ($n == $pageNum) ? " active" : "";
    $pagerData['current'] .= "<li class='page-item{$style}'><a class='page-link' href='{$page->url}?page={$n}'>{$n}</a></li>";
  }

  $max = $pageNum + 5;
  for($n = $pageNum + 1; $n <= $numPaginations; $n ++){
    if($n >= $max) break;
    $pagerData['current'] .= "<li class='page-item'><a class='page-link' href='{$page->url}?page={$n}'>{$n}</a></li>";
  }

  $pagerData['prev'] = "<li class='page-item'>
            <a class='page-link' href='{$page->url}?page={$prevNum}' aria-label='Previous'>
              <span aria-hidden='true'>Previous</span>
            </a>
          </li>";          

  if($pageNum < $numPaginations){
    $pagerData['next'] = "<li class='page-item'>
              <a class='page-link' href='{$page->url}?page={$nextNum}' aria-label='Next'>
                <span aria-hidden='true'>Next</span>
              </a>
            </li>";
  }

  $pagerData['first'] = "<li class='page-item'>
            <a class='page-link' href='{$page->url}' aria-label='Last'>
              <span aria-hidden='true'>&laquo;</span>
            </a>
          </li> ";          

  if($pageNum < $numPaginations){
    $pagerData['last'] = "<li class='page-item'>
              <a class='page-link' href='{$page->url}?page={$numPaginations}' aria-label='Last'>
                <span aria-hidden='true'>&raquo;</span>
              </a>
            </li> ";
  }

  $pagerData['pageInfo'] = "<li>&nbsp;</li><li class='page-item'><span class='page-link'>{$pagerData['info']}</li><li class='page-item'><span class='page-link'>{$pagerData['page']}</span></li>";

  if($pageNum == $numPaginations && $pageNum !== 1) {
    // last Page
    $pagerHTML = "<ul class='pagination justify-content-center'>{$pagerData['first']}{$pagerData['prev']}{$pagerData['current']}{$pagerData['pageInfo']}</ul>";

  } else if($pageNum == 1) {
    
    // you are on the first page of results
    $pagerHTML = "<ul class='pagination justify-content-center'>{$pagerData['current']}{$pagerData['next']}{$pagerData['last']}{$pagerData['pageInfo']}</ul>";
  
  } else if($pageNum > $numPaginations) {

    // beyond the last page, do a redirect or a 404
    $session->redirect($pages->get($config->http404PageID)->httpurl());
    throw new Wire404Exception();
    die();

  } else {
    // somewhere in the middle of the paginations
    $pagerHTML = "<ul class='pagination justify-content-center'>{$pagerData['first']}{$pagerData['prev']}{$pagerData['current']}{$pagerData['next']}{$pagerData['last']}{$pagerData['pageInfo']}</ul>";
  
  }  
} else {
  // there were no results on any pagination

}

下面是pagination的html代码

  <ul class="pagination justify-content-center">
   <li class="page-item"> <a class="page-link" href="/tags.html" aria-label="Last"> <span aria-hidden="true">&laquo;</span> </a> </li> 
   <li class="page-item"> <a class="page-link" href="/tags.html?page=3" aria-label="Previous"> <span aria-hidden="true">Previous</span> </a> </li>
   <li class="page-item"><a class="page-link" href="/tags.html?page=1">1</a></li>
   <li class="page-item"><a class="page-link" href="/tags.html?page=2">2</a></li>
   <li class="page-item"><a class="page-link" href="/tags.html?page=3">3</a></li>
   <li class="page-item active"><a class="page-link" href="/tags.html?page=4">4</a></li>
   <li class="page-item"><a class="page-link" href="/tags.html?page=5">5</a></li>
   <li class="page-item"><a class="page-link" href="/tags.html?page=6">6</a></li>
   <li class="page-item"><a class="page-link" href="/tags.html?page=7">7</a></li>
   <li class="page-item"><a class="page-link" href="/tags.html?page=8">8</a></li>
   <li class="page-item"> <a class="page-link" href="/tags.html?page=5" aria-label="Next"> <span aria-hidden="true">Next</span> </a> </li>
   <li class="page-item"> <a class="page-link" href="/tags.html?page=9" aria-label="Last"> <span aria-hidden="true">&raquo;</span> </a> </li> 
  </ul>

Post Comment