HOW TO create pagination links with images?

Talk and info about common issues

Moderators: ne_moj, zewa, vadimako, ne_moj, zewa, vadimako

administrator
Site Admin
Site Admin
Posts: 5992
Joined: Jan 7th, '09, 23:18
Contact:

HOW TO create pagination links with images?

Postby administrator » Nov 21st, '11, 11:11

This post describes how to use images in pagination links instead of arrows |<< >>|

FIST METHOD:
1. Prepare all needed images and place them in appropriate folder.

1. Define in your $paging_arrows array in following way:

Code: Select all

$paging_arrows = array(
   "first"=>"<img src=images/first.png>",
   "previous"=>"<img src=images/previous.png>",
   "next"=>"<img src=images/next.png>",
   "last"=>"<img src=images/last.png>",
);
$dgrid->SetPagingSettings($bottom_paging, $top_paging, $pages_array, $default_page_size, $paging_arrows);


In this way you have to get something like this:
pagination_links.png
pagination_links.png (1.22 KiB) Viewed 1841 times


SECOND METHOD: (with CSS)
1. Prepare all needed images and place them in appropriate folder.

2. Define for your current links following styles:

Code: Select all

background: url(images/first.png) 3px 1px no-repeat;
padding-left: 18px;
text-indent: -1999px;
display:block;

Return to “ApPHP DataGrid {HOW TO}”