Skip to content

Instantly share code, notes, and snippets.

@marcosfreitas
Created January 12, 2017 00:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcosfreitas/c4669abc7f825b001af6f1cc7b0935ce to your computer and use it in GitHub Desktop.
Save marcosfreitas/c4669abc7f825b001af6f1cc7b0935ce to your computer and use it in GitHub Desktop.
Create a custom pagination based on total of pages received
<style>
.mf-pagination {
display: block;
list-style: none;
margin: 2em 0 0 0;
width: 100%;
padding: 1em;
text-align: right;
font-size: 1.2em;
}
.mf-pagination li {
display: inline-block;
}
.mf-pagination .disabled a,
.mf-pagination disabled a {
cursor: not-allowed;
background: #cecece !important;
color: #bbb !important;
}
.mf-pagination li a {
display: block;
width: 35px;
height: 35px;
text-align: center;
font-size: 1.2em;
padding: .8em 0;
background : #262626;
color : #f2f2f2;
margin : 0 0.2em;
border-radius: .2em;
}
.mf-pagination__item--active {
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter : progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-moz-opacity : 0.8;
opacity : 0.8;
}
</style>
<?php
/**
* Create a custom pagination based on total of pages received.
* -- you can define the icon for use inside the function changing the html, I'm using material icons.
*
* @param string $base_url The url to be printed on links.
* @param integer $total_pages The total of pages returned by functions like getRecords()
* @param integer $ipp Items per page
* @param integer $page Current page number
* @param string $list_class custom class to put in ul tag
* @version 1.2 changed the parameters to working with total of pages without receive itens per page number
* @author Marcos Freitas <https://gist.github.com/marcosfreitas>
*/
function createPagination($base_url, $total_pages, $page, $list_class = null) {
if (empty($total_pages)) {
return;
}
$page = (int) $page;
$last = (int) $total_pages;
# number of links displayied
$links = 4;
$start = ( ( $page - $links ) > 0 ) ? $page - $links : 1;
$end = ( ( $page + $links ) < $last ) ? $page + $links : $last;
$html = '<div class="mf-pagination-container"><ul class="mf-pagination ' . $list_class . '">';
if ($page > 1) {
$html .= '<li class="effect-transition effect-opacity"><a href="'. $base_url . ( $page - 1 ) . '/"><i class="material-icons">keyboard_arrow_left</i></a></li>';
}
if ( $start > 2 ) {
$html .= '<li class="effect-transition effect-opacity"><a href="'. $base_url . '1/">1</a></li>';
$html .= '<li class="effect-transition effect-opacity disabled"><span>...</span></li>';
}
for ( $i = $start ; $i <= $end; $i++ ) {
$class = ( $page === $i ) ? "mf-pagination__item--active disabled" : "";
$html .= '<li class="effect-transition effect-opacity ' . $class . '"><a href="'. APP_URL . $base_url . $i . '/">' . $i . '</a></li>';
}
# diference more than 1 page
if ( $end+1 < $last ) {
$html .= '<li><span>...</span></li>';
$html .= '<li class="effect-transition effect-opacity"><a href="'. APP_URL . $base_url . $last .'">' . $last . '</a></li>';
}
if ($page !== $last) {
$html .= '<li class="effect-transition effect-opacity"><a href="'. APP_URL . $base_url . ($page+1) .'"><i class="material-icons">keyboard_arrow_right</i></a></li>';
}
$html .= '</ul></div>';
return $html;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment