CODEWITHSUNDEEP
javascriptjqueryjquery-mobilepaginationjquery-pagination
code_finder
code_finder

Reputation: 1370

Pagination in jquery or jquery mobile

I am developing an app where i need to implement pagination for changing of images. The code i am using is.

index.html

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
</head>

<body>

<div class="imagesScreen" id="imagesScreen">

            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />              
</div>


 </body>
 </html>

Here as per above code i am having two buttons in footer tag(not mentioned code above). in each page i want to display around 6-10 images & when i click next button or previous button in the same page data needs to be change using Pagination technique. Here i took static data, but in my app that data comes from server during runtime. so, i need to create dynamic data.

As per the link Pagination link here getting one image at a time. but i want around 6-10 images as per the below picture. when i click on next button page need to be same but data must change as per the Pagination link.

enter image description here Can anyone please help me with this how to get that type of pagination technique & how to create dynamic data of div & image tags( & tags), as i want the view as per the below blackberry image shown. Thanks in advance..

Upvotes: 0

Views: 2560

Answers (2)

casraf
casraf

Reputation: 21684

It's a fairly logical feature. First, I'm assuming you're pulling data with SQL using a limit SELECT * FROM images ORDER BY time DESC LIMIT 0, 9

I'm assuming you're using PHP for the server-side scripting, if not, try accommodating this to your language. Let's say we have a GET value that uses page=123 for the page ID, of course 123 is an arbitrary number; we need to pull the images starting at page number * items per page so for example, at page 2, we get 2 * 9 which is 18, so our first picture should be picture 18. Now I just go on taking the correct LIMIT clause in the SQL query:

PHP:

$start = $_GET['page'] * $items_per_page;

SQL:

SELECT * FROM `images` ORDER BY `time` DESC LIMIT {$start}, {$items_per_page}

That's the basic gist of it.

Upvotes: 2

Abdul
Abdul

Reputation: 90

You can try the below URL as a reference.

http://cssglobe.com/lab/easypaginate/02.html

Thanks

Upvotes: 1

Related Questions