jquery或jquery mobile中的分页答案

【问题标题】：Pagination in jquery or jquery mobilejquery或jquery mobile中的分页
【发布时间】：2012-07-05 18:51:55
【问题描述】：

我正在开发一个应用程序，我需要在其中实现分页以更改图像。我使用的代码是。

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>

根据上面的代码，我在页脚标记中有两个按钮（上面没有提到代码）。在每个页面中，我想显示大约 6-10 张图像，当我单击同一页面中的下一个按钮或上一个按钮时，需要使用分页技术更改数据。在这里，我获取了静态数据，但在我的应用程序中，数据在运行时来自服务器。所以，我需要创建动态数据。

根据链接Pagination link 这里一次获取一张图片。但我想要大约 6-10 张图片，如下图所示。当我点击下一个按钮页面需要相同但数据必须根据Pagination link 更改。

任何人都可以帮我解决如何获得那种类型的分页技术以及如何创建 div 和图像标签（和标签）的动态数据，因为我希望按照下面显示的黑莓图像查看视图。提前谢谢..

【问题讨论】：

看这个答案：stackoverflow.com/questions/5260029/jquery-image-pagination.You可以从服务器获取图片链接。

标签： javascript jquery jquery-mobile pagination jquery-pagination

【解决方案1】：

这是一个相当合乎逻辑的功能。首先，我假设您使用 SQL 使用限制来提取数据 SELECT * FROM images ORDER BY time DESC LIMIT 0, 9

我假设您将 PHP 用于服务器端脚本，如果没有，请尝试将其适应您的语言。假设我们有一个GET 值，它使用page=123 作为页面ID，当然123 是一个任意数字；我们需要从page number * items per page 开始拉取图片，例如，在页面2，我们得到2 * 9，即18，所以我们的第一张图片应该是图片18。现在我继续在 SQL 查询中使用正确的 LIMIT 子句：

PHP：

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

SQL：

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

这就是它的基本要点。

【讨论】：

与我要回答的非常相似。 +1

【解决方案2】：

您可以尝试以下网址作为参考。

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

谢谢

【讨论】：