Styling PEAR Pager CSS

I had a little trouble styling the output of the pear pager (a pagination system). I liked to get some nice boxes around the numbers 1 2 3 … so that they were displayed in blocks like on altavista (were you actually can see the border) or google (were you can not see the border – the border is not visible – but it is there). It was actually quite simple.

Here is the css:

#pager b {
    display: block;
    float: left;
    margin: 0 5px 0 0;
    padding: 2px 8px;
    text-align: center;
    text-decoration: none;
 
}
 
#pager a {
    border: 1px solid #CCDBE4;
    color: #3666D4;
    display: block;
    float: left;
    margin: 0 5px 0 0;
    padding: 2px 8px;
    text-align: center;
    text-decoration: none;
}
 

The results displayed in html looks like this. I just add a div with id pager around the results which the PEAR::Pager outputs:

 
<div id="pager">
<b>1</b>      
<a href="/content/index?from=2" title="Page 2">2</a>      
<a href="/content/index?from=3" title="Page 3">3</a>      
<a href="/content/index?from=2" title="Next Page">»</a>      
</div>

I used the following options in the Pager::factory method: You can just use your own options. Only thing to note is just to let ‘seperator’ be empty.

 
$pager_options = array(
    'separator' => '',
    'mode'       => 'Sliding',
    'perPage'    => 10,
    'delta'      => 2,
    'urlVar'    => 'from', 
    'append'   => false,
    'path'     =>  '',
 
);
 
$pager = Pager::factory($pager_options);
 
// enclose the results in the div with id pager:
 
echo "<div id =\"pager\">" . $pager->links . "</div>\n" ;
 
 

That’s it.