文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery或jquery mobile中的分页

问jquery或jquery mobile中的分页
EN

Stack Overflow用户

提问于 2012-07-05 18:41:28

回答 2查看 2.5K关注 0票数 0

我正在开发一个应用程序，在那里我需要实现图像的改变分页。我使用的代码是。

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和图像标签(&标签)的动态数据，因为我想要的视图，根据下面的黑莓图像显示。提前谢谢..

javascript

jquery

jquery-mobile

pagination

jquery-pagination

回答 2

Stack Overflow用户

发布于 2012-07-05 18:51:55

这是一个相当合乎逻辑的特性。首先，我假设您使用限制SELECT * FROM images ORDER BY time DESC limit 0，9使用SQL拉取数据

我假设您正在使用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}

这就是它的基本要点。

票数 2

Stack Overflow用户

发布于 2012-07-05 18:45:58

您可以尝试以下URL作为参考。

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

谢谢

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11342664

复制

相似问题

问jquery或jquery mobile中的分页
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery或jquery mobile中的分页EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery或jquery mobile中的分页
EN