Jump to content

Pagination in Mobile Website


oshopindia
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.