How To Make A Simple Paginate PHP Class With Light & Dark Styles

in PHP

View Demo

Page Create a simple paginate class in PHP made up of 3 functions.

  • Constructor - This function is called as soon as the class is initialised so this is a good place to put the functionality that needs to be setup for the class to work. So this is where we are sending all the parameters that are going to be used by the class.
  • getOutput - This function will just echo out the output variable which will hold the HTML for the pagination.
  • getPages - This will do the processing of the class and work out how many pages it needs and create the HTML needed by the class.
  • /**
     * Simple Paginate class
     */
    class Paginate {
    	
    	private $current_page = false;
    	private $total_items = false;
    	private $items_per_page = false;
    	private $url = false;
    	private $param = false;
    	private $output = false;
    	
    	/**
    	 * Constructor for the paginate class will get setting parameter to setup the pagination
    	 */
    	public function __construct($settings){
    		
    		if(isset($settings['current_page'])){
    			$this->current_page = $settings['current_page'];
    		}
    		if(isset($settings['total_items'])){
    			$this->total_items = $settings['total_items'];
    		}
    		if(isset($settings['items_per_page'])){
    			$this->items_per_page = $settings['items_per_page'];
    		}
    		if(isset($settings['css_classes'])){
    			$this->css_classes = $settings['css_classes'];
    		}
    		if(isset($settings['url'])){
    			$this->url = $settings['url'];
    		}
    		if(isset($settings['param'])){
    			$this->param = $settings['param'];
    		}
    	
    		$this->getPages();
    	}
    	
    	/**
    	 * Will echo the output variable
    	 */
    	public function getOutput(){
    		echo $this->output;
    	}
    	
    	/**
    	 * Setup the paginate from the parameters sent to the class
    	 */
    	private function getPages(){
    		//Get the maximum number of pages
    		$numPages = round($this->total_items/$this->items_per_page);
    		
    		$this->output = '<ul class="'.$this->css_classes.'"><li>';
    		
    		//Dont display link if the current page is 1 because you can't go to a previous page
    		if($this->current_page != 1){
    			$this->output .= '<a href="'.$this->url.'?'.$this->param.'='.($this->current_page - 1).'" title="Previous Page">';
    		}
    		
    		//Display less than symbol
    		$this->output .= '<';
    		
    		//Close link on pages that are not 1
    		if($this->current_page != 1){
    			$this->output .= '</a>';
    		}
    		
    		$this->output .= '</li>';
    		
    		//Loop through the total number of pages to create the page links
    		for($i=1; $i<=$numPages; $i++){			
    			$this->output .= '<li';
    			
    			//If current page then add a new class
    			if($this->current_page == $i){
    				$this->output .= ' class="selected"';
    			}
    			
    			//Add link to box item
    			$this->output .= '><a href="'.$this->url.'?'.$this->param.'='.$i.'" title="Page '.$i.'">'.$i.'</a></li>';
    		}
    		
    		$this->output .= '<li>';
    		
    		//Add link if current page isn't the last page
    		if($this->current_page != $numPages){
    			$this->output .= '<a href="'.$this->url.'?'.$this->param.'='.($this->current_page + 1).'" title="Next Page">';
    		}
    		
    		//Add greater than symbol
    		$this->output .= '>';
    		
    		//Add closing link if current page isn't the last page
    		if($this->current_page != $numPages){
    			$this->output .= '</a>';
    		}
    		
    		//Close list item and list
    		$this->output .= '</li></ul>';
    	}
    }

    Paginate Constructor

    This will get called when you initialise the class, this is why we send through all the parameters to setup the object. We are sending through an array of options which is everything we need to know to setup the paginate object.

    These parameters are:

    • current_page - This is the current page we need to know this value so we can highlight it differently than the other numbers.
    • total_items - This is the total number of items we are going to page through.
    • items_per_page - This will tell us how many items were expecting on each page when divided by the total items we will know how many pages we need.
    • css_classes - This is any additional css classes we need to add to the list items such as the selected item.
    • url - This is the url that will be added to all the page boxes.
    • param - This is the name of the parameter we will send through with the page number.

    The constructor will get all these and put them in class variables so we can use them later in the object.

    Log Out

    Get Output Function

    This function will simply echo the output variable.

    The output variable is the variable that will be used to store the HTML output. So we can call this from anywhere on the page we want the pagination to be.

    Get Pages Function

    This will do all the processing for the class to setup the pagination for the page.

    First it needs to work out how many pages we will be displaying in total, this is done by taking the total items variable and dividing it by the items per page variable, then round this number up will return the total number of pages we need.

    $numPages = round($this->total_items/$this->items_per_page, 0, PHP_ROUND_HALF_UP);

    Then we can start creating the items, we will be using a unordered list to display the items this is because of the ease to styling them later in the example.

    The first item we are adding is going to be the previous page which will add a link to the previous page which we will know from taking 1 away from the current page variable. But if the current page is 1 then we don't want to add a link to page 0 because it doesn't exist so we need to add a if statement to decide if we need to add the link or not.

    //Dont display link if the current page is 1 because you can't go to a previous page
            if($this->current_page != 1){
    		$this->output .= '<a href="'.$this->url.'?'.$this->param.'='.($this->current_page - 1).'" title="Previous Page">';
    	}
    		
    	//Display less than symbol
    	$this->output .= '<';
    		
    	//Close link on pages that are not 1
    	if($this->current_page != 1){
    		$this->output .= '</a>';
    	}
    		
    	$this->output .= '</li>';

    Note the url in the list item will use the url set at the constructor then a parameter separator ? then the parameter name then the page number. So if the url is set to www.paulund.co.uk and the param is set to page the url will look like this:

    http://www.paulund.co.uk?page=5

    This is the format that will be used through the class.

    Now we add a loop to go through the total number of pages and create the items for these pages. But we will need to add an if statement to check for the current page so we can highlight this page differently to the others. So we are checking if the current page is equal to the current loop page if it does then we will add a CSS class selected to the list item.

    //Loop through the total number of pages to create the page links
    	for($i=1; $i<=$numPages; $i++){			
    		$this->output .= '<li';
    			
    		//If current page then add a new class
    		if($this->current_page == $i){
    			$this->output .= ' class="selected"';
    		}
    			
    		//Add link to box item
    		$this->output .= '><a href="'.$this->url.'?'.$this->param.'='.$i.'" title="Page '.$i.'">'.$i.'</a></li>';
    	}

    Earlier we added a previous page well now we need to add a next page to the pagination. We will use the same approach as before but will check to see if the current page equals the same as the total pages then we won't display the link for the next page and end the list.

    $this->output .= '<li>';
    		
    	//Add link if current page isn't the last page
    	if($this->current_page != $numPages){
    		$this->output .= '<a href="'.$this->url.'?'.$this->param.'='.($this->current_page + 1).'" title="Next Page">';
    	}
    		
    	//Add greater than symbol
    	$this->output .= '>';
    		
    	//Add closing link if current page isn't the last page
    	if($this->current_page != $numPages){
    		$this->output .= '</a>';
    	}
    		
    	//Close list item and list
    	$this->output .= '</li></ul>';

    Now you understand how the class is made up I can show you how to use it.

    First include the class in your page.

    require_once 'php/paginate.class.php';
    
    	$light_paginate_settings = array('current_page'=>'4', 'total_items'=>'100', 'items_per_page'=>'10', 'css_classes'=>'paginate light', 'url'=>'here', 'param'=>'page');
    
    	$dark_paginate_settings = array('current_page'=>'8', 'total_items'=>'100', 'items_per_page'=>'10', 'css_classes'=>'paginate dark', 'url'=>'here', 'param'=>'page');
    
    	$light_paginate = new Paginate($light_paginate_settings);
    
    	$dark_paginate = new Paginate($dark_paginate_settings);

    In this example I am making two versions of the paginate class. They are the same except for the CSS classes so I will show you how you can use different styles for the lists.

    First we need to include the class in the page by using the require_once function.

    Then we setup the settings arrays including all the parameters needed.

    Then we create the objects and pass in the parameter list to the constructor.

    Now anywhere we have the list of pages stored in the object we can display them anywhere on the page by calling the getOutput() function.

    $light_paginate->getOutput();
    
            $dark_paginate->getOutput();

    This will now echo out the output from the two objects and display the pagination on the page.

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    At the moment it will just be lists of pages with links, now we need to style them.

    Styling The List Items

    In this example I am going to show you 2 versions of how to style these items, one with a light style and one with a dark style.

    Create a CSS file and copy the below CSS to the file.

    Paginate CSS Class

    In the above example I passed through a CSS Class paginate which is what we will use to style the lists.

    First we need to change the list items to be horizontal. Then we are going to style the link inside the lists so that the entire item box will be click able and not just the list item.

    We need to add padding to the link and a border to define the click able area.

    ul.paginate{ list-style:none; float:left; margin:140px 150px; padding:0;}
    ul.paginate li { float:left; }
    ul.paginate li a{ padding:7px 10px; margin:5px; border:1px solid #626262; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;text-decoration:none;
    box-shadow: 1px -1px 2px #bbc6c8;
    -webkit-box-shadow: 1px -1px 2px #bbc6c8;
    -moz-box-shadow: 1px 1px 2px #bbc6c8;}

    Light_bulb

    Lighter Style

    Now for the lighter style we are using the CSS class light for styling the links differently, these links will inherit everything from the paginate class and then overwrite when it needs to.

    .light li a,.dark li.selected a{background: #f9f9f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f9f9f9 0%, #ebebeb 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#ebebeb 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#ebebeb 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #f9f9f9 0%,#ebebeb 100%); /* W3C */
    color:#626262;}
    
    .light li a:hover{
    	background: #fefefe;
    }

    In this example I am also using the same style for the selected item of the dark style, this is so you can easily see which one is the current page. For the lighter style on the selected item I will use the same style as the dark list.

    Light bulb off

    Darker Style

    Now for the darker style we are using the CSS class dark for styling the links differently, these links will inherit everything from the paginate class and then overwrite when it needs to.

    .dark li a,.light li.selected a {background: #575f62; /* Old browsers */
    background: -moz-linear-gradient(top, #575f62 0%, #43464b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#575f62), color-stop(100%,#43464b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #575f62 0%,#43464b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #575f62 0%,#43464b 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #575f62 0%,#43464b 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575f62', endColorstr='#43464b',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #575f62 0%,#43464b 100%); /* W3C */
    color:#f9f9f9; border:1px solid #43464b; }
    
    .dark li a:hover{
    	background: #5e7386;
    }

    Click on the below link to view a demo of what was created and download the files needed to create it.

    View Demo

Subscribe To Newsletter

Get weekly updates to your email