Pagination in Mobile Website

[oshopindia]

We Have online shopping portal Named Oshopindia.com

 

recently we created mobile website for oshopindia on products page we want to add pagination for products

 

We impliment many code of pagination but it's not working properly in mobile website

 

Can anybody Suggest me any simple pagination code for Mobile website

[ginerjm]

#1 - pagination on a mobile site is no different than a non-mobile one.

#2 - try googling it and getting some code together and then if you have a problem, show it to the forum.

[oshopindia]

My code for pagination is as below :

 

  if($total_nums)
    {
        $range = 1; //NUMBER OF PAGES TO BE SHOWN BEFORE AND AFTER THE CURRENT PAGE NUMBER
        
        //FIRST, PREVIOUS, NEXT, AND LAST LINKS
        if($pagenum>1)
        {
            $page = $pagenum - 1;
            $first = '<a class="page" id="1">First  </a> ';
            $prev = '<a class="page" id="'.$page.'"> Prev </a> ';
        }
        if($pagenum<$total_pages)
        {
            $page = $pagenum + 1;
            $next = '<a class="page" id="'.$page.'"> Next </a> ';
            $last = '<a class="page" id="'.$total_pages.'"> Last</a> ';
        }
        
        //PAGINATION
        for($page=($pagenum-$range); $page<=($pagenum+$range); $page++)
        {
            if($page>=1&&$page<=$total_pages)
            {
                if($page==$pagenum)
                {
                    /*$nav .= '<span class="pagenum" id="'.$page.'">'.$page.'</span> ';*/
                    $nav .= '<a class="pagenum" id="'.$page.'"> '.$page.' </a> ';
                }
                else
                {
                    $nav .= '<a class="page" id="'.$page.'"> '.$page.'  </a> ';
                }
            }
        }
    }
    
    //DISPAYS IN HTML
    echo '<table class="content"><tr><td align="center" style="font-size: 28px;min-width:60px" width="100%" >'.$first . $prev . $nav . $next . $last.'</td></tr></table>';
    
} else {
    //OTHERWISE...
    header("Location: view-comments.php"); //WILL REDIRECT TO THE FIRST PAGE OF RESULTS
}

 

 

Javascript of the above code :

 

<script>
$(function(){
$("#content").load("view-comments.php");

//PAGE NUMBER onClick FUNCTION
$(".page").live("click", function(){
var page = $(this).attr("id");
$("#content").load("view-comments.php?page="+page);
});
});
</script>

 

CSS code :

 

<style>
#content
{
    background-color: #ffffff;
}
.page:hover {
cursor: pointer;
text-decoration: underline;
}
.pagenum {
/*color: #32baed;*/
color: #000000;

}
.content {
width: 100%;
}
.content td {
/*width: 50%;*/
/*color: #333*/
}
</style>

 

Issue :

 

Here the given code i used for our mobile website ( http://oshopindia.com/mobile/pagination-ajax-jquery1392875733/view.php ) . During testing i found that this code work perfectly on chrome and android browsers. But in operamini and safari browsers its not working.

 

In operamini and safari mobile browsers the pagination numbers work as simple text instead  of links

 

Waiting for some useful solution ...

 

thanks in advanced

 

Oshopindia Team