Custom css for links in pagination script

mlucicom
Posts: 32

Custom css for links in pagination script

On this page: mluci.website/rent i use your pagination script from: http://coursesweb.net/php-mysql/paginat ... -script_s2
It' very good, but i want to use my custom css for this pagination script and don't know how to integrate this.

Code: Select all

//... // method that sets the links public function getLinks() { $re_links = ''; // the variable that will contein the links and will be returned $pag_get = '?pg='; // the name for the GET value added in URL // if $totalpages>0 and totalpages higher then $this->idpage if($this->totalpages > 0 && $this->totalpages > $this->idpage) { // links to first and back page, if it isn't the first page if ($this->idpage > 0) { // show << for link to 1st page if(($this->idpage + 1) > $this->range) $re_links .= '<a href="'. $this->pag. '" title="1">(1) <<</a>'; // show < for link to back page if(($this->idpage - $this->range) > 2) $re_links .= ' <a href="'. $this->pag. $pag_get. ($this->idpage - $this->range - 1) .'" title="'. ($this->idpage - $this->range) .'">('. ($this->idpage - $this->range) .')<</a>'; } // sets the links in the range of the current page for($x = ($this->idpage - $this->range + 1); $x <= ($this->idpage + $this->range); $x++) { $ipg = max(0, ($x - 1)); // index of page in URL // if it's a number between 0 and last page if (($x > 0) && ($x <= $this->totalpages)) { // if it's the number of current page, show the number without link, otherwise add link if ($x == ($this->idpage + 1)) $re_links .= ' [<span style=" white-space: nowrap; font-size: 11px; line-height: 33px; font-weight: 700; text-transform: uppercase; text-align: center; margin: 0 3px; float: left; width: 33px; height: 33px; background: #fff; -moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px; webkit-box-shadow: 0 0 2px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 2px rgba(0,0,0,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); }">'. $x .'</span>] '; else $re_links .= ' <a href="'. $this->pag. $pag_get. $ipg. '" title="'. $x. '">'. $x .'</a>'; } } // If the current page is not final, adds link to next and last page if ($this->idpage < $this->totalpages) { // show > for next page if(($this->idpage + $this->range) < ($this->totalpages - 3)) $re_links .= ' <a href="'. $this->pag. $pag_get. ($this->idpage + $this->range + 1) .'" title="'. ($this->idpage + $this->range +2) .'">>('. ($this->idpage + $this->range +2) .')</a>'; // show >> for last page if($this->totalpages > $this->range && $this->totalpages > ($this->idpage + 2)) $re_links .= ' <a href="'. $this->pag. $pag_get. ($this->totalpages - 1) .'" title="'. $this->totalpages .'">>> ('. $this->totalpages. ')</a> '; } } // adds all links into a DIV and return it if(strlen($re_links)>1) $re_links = $re_links; return $re_links; } }
and this is the pagination that i want to use

Code: Select all

<div class="pager"> <span><a href="index.html">First page</a></span><span class='page-numbers current'>1</span><span><a class='page-numbers' href='page/2/index.html'>2</a></span><span><a class='page-numbers' href='page/3/index.html'>3</a></span><span><a class='page-numbers' href='page/4/index.html'>4</a></span><span><a class="next page-numbers" href="page/2/index.html">></a></span><span><a href="page/4/index.html">Last page</a></span> </div> </nav> </div>

Admin
Hello,
See if this it works. In that pagination class replace the getLinks() method with this:

Code: Select all

// method that sets the links public function getLinks(){ $re_links =''; // the variable that will contein the links and will be returned $pag_get ='?pg='; // the name for the GET value added in URL // if $totalpages>0 and totalpages higher then $this->idpage if($this->totalpages >0 && $this->totalpages > $this->idpage) { // links to first and back page, if it isn't the first page if ($this->idpage >0){ // show << for link to 1st page if(($this->idpage +1) > $this->range) $re_links .='<span><a href="'. $this->pag. '" title="1">First page</a></span>'; // show < for link to back page if(($this->idpage - $this->range) >2) $re_links .=' <span class="prev page-numbers"><a href="'. $this->pag. $pag_get. ($this->idpage - $this->range -1) .'" title="'. ($this->idpage - $this->range) .'">('. ($this->idpage - $this->range) .')<</a></span>'; } // sets the links in the range of the current page for($x = ($this->idpage - $this->range +1); $x <= ($this->idpage + $this->range); $x++){ $ipg = max(0, ($x -1)); // index of page in URL // if it's a number between 0 and last page if(($x >0) && ($x <= $this->totalpages)){ // if it's the number of current page, show the number without link, otherwise add link if($x == ($this->idpage +1)) $re_links .=' <span class="current page-numbers">'. $x .'</span> '; else $re_links .=' <span class="page-numbers"><a href="'. $this->pag. $pag_get. $ipg. '" title="'. $x. '">'. $x .'</a></span>'; } } // If the current page is not final, adds link to next and last page if($this->idpage < $this->totalpages){ // show > for next page if(($this->idpage + $this->range) < ($this->totalpages -3)) $re_links .=' <span class="next page-numbers"><a href="'. $this->pag. $pag_get. ($this->idpage + $this->range +1) .'" title="'. ($this->idpage + $this->range +2) .'">>('. ($this->idpage + $this->range +2) .')</a></span>'; // show >> for last page if($this->totalpages > $this->range && $this->totalpages > ($this->idpage + 2)) $re_links .=' <span><a href="'. $this->pag. $pag_get. ($this->totalpages - 1) .'" title="'. $this->totalpages .'">Last page ('. $this->totalpages. ')</a></span> '; } } // adds all links into a DIV and return it if(strlen($re_links)>1) $re_links ='<div class="pager">'. $re_links .'</div>'; return $re_links; }
Then style the css classes in your custom css.

mlucicom
how can i display pagination where i want?

Admin
Did you read the documentation?
- Display paginated content:

Code: Select all

echo $objPg->getMysqlRows();
- Display pagination links:

Code: Select all

echo $objPg->getLinks();

mlucicom
thank you! your code work great..but i have a problem..the first number page doesn't is a circle..how can i fix this

Admin
From what i saw in that page, all the pagination numbers are with circle style.
Anyway, the solution is to set the same css style as the other buttons, a same css class.

Similar Topics