Cohesive Web

Pagination is a common practice to show big volume of data. It is quite important if you are showing dynamically populated data.

For myself I mostly use PEAR::Pager to display paginated data. If you are familiar with this package then you know that you can use 2 types of pagination display, as – sliding and jumping. In case of sliding display with a common practice is to use it with constructor option append:true and urlVar:<variablename>.

Let me show an example of this kind of usage –
[code lang=”php-brief”]
$Params = array(
‘itemData’ => $dataDetails,
‘perPage’ => $ViewPerPage,
‘append’ => true,
‘separator’ => ‘|’,
‘spacesBeforeSeparator’ => 1,
‘spacesAfterSeparator’ => 1,
‘clearIfVoid’ => false,
‘urlVar’ => ‘page’,
‘useSessions’ => true,
‘closeSession’ => true,
‘mode’ => ‘Sliding’,
‘importQuery’ => true,
‘linkClass’ => ‘LinkStyle’,
);
$Pager = Pager::factory($Params);
$DataDetailsInArray = $Pager->getPageData();
$PaginationLinks = $Pager->getLinks();
[/code]

Now if you print/echo the $PaginationLinks, then you will get pagination like 1 2 3 4 etc.

Now let me describe you the problem:
Say your page url is mydata.php. So mydata.php page will show the first page of paginated data. while using the pagination links you will get a page with url mydata.php?page=1. This page shows the first page of paginated data. Now you are having a page with 2 different url like mydata.php and mydata.php?page=1. In SEO this is known as duplicate content. This is not good if you are seriously deal with SEO.

Here is the correction for this. This is simple but effective.

[code lang=”php-brief”]
if(isset($_GET[‘page’]) && $_GET[‘page’] > 1)
{
$PaginationLinks[‘all’] = str_replace(array(‘?page=1″‘, ‘&page=1″‘), ‘”‘, $PaginationLinks[‘all’]);
}
[/code]

Use this code section just after generating $PaginationLinks. Hope this will help you. As always comments/suggestions are welcome. But spammers please don’t waste your time. 🙂

I have started using jQuery – JavaScript framework almost end of the last year. I have also used it for my last couple of projects. I find it very useful to design/develop complex type of functionality in the client-end. One of the interesting feature of jQuery is that it provides a large number of plugins designed by different developers. They are very useful too.

In my current project I need to display multiple content pages within a web page. I require to slide the page numbers so that user can view the number of pages by sliding/scrolling. I was looking for some good plugin which could satisfy my need. I have tested some of them but couldn’t find out the ideal one. So wrote the basic code for the functionality and the effect. However I wasn’t satisfied with my work as I was looking for some plugin for it. I thought it is the best time to try authoring plugin in jQuery.

It took almost 9 days to convert the code into a plugin. I gave the plugin namespace as paginationslider.

Code example:
Script section –

[code lang=”javascript”]



[/code]

Style section –
[code lang=”css”]
.pgSlider {
width: 80px; overflow: auto; background:#fff; margin:0 auto; position:relative; border:1px solid orange; float:left; display:inline;
}
.pgSlider ul {
display: block; padding: 0; margin: 0; list-style: none; position:relative;
}
.pgSlider ul li {
display: block; float: left; background:#E3ECF4;
}
.pgSlider a {
display: block; text-decoration: none; text-align:center; padding: 5px 8px; color:#1079B1; font-weight:bold; border-right:1px solid #fff;
}
[/code]

HTML Section –

[code lang=”html4strict”]

   
<<
   

      

         
1
         
2
         
3
         
4
         
5
         
6
         
7
         
8
         
9
      
   
   
>>

[/code]

I will eagerly wait for your reviews on this plugin. Here you can view the demo.