今天老板提了个需求，就是想在产品详情页的评论里面进行分页，然后由于评论在整个页面的中间靠下部分，那么分页后每次点击分页进行跳转都会回到顶部，需要再次拉取到评论的位置才能看到，这样体验不好。于是就想点击后在当前位置浏览下一页的评论。对于这个需求，笔者可以想到的是两种解决方案：
第一种：使用ajax，分页数据照样，然后在接受的控制器中根据传过去的p进行判断，p不等于1，则使用ajax返回数据，重写对应块。这样的方式以前在thinkPHP里面常用到。但是在系统中，当前也可以，但是反应速度会比较慢，一次请求应该在两三秒之间，整体体验并不好。于是只能换种思路。
第二种：就是用js插件对数据进行分页，并无刷新加载下一页。在jq22网站上找了一圈，发现只有这个插件比较符合需求。名字叫jPages，貌似是一个外国人写的，在github上面有开源的代码。这里就大致写一下自己的测试和使用注意事项：
上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>defaults</title>
<meta name="description" content="defaults">
<meta name="keywords" content="jquery, pagination, javascript, plugin"/>
<meta name="author" content="Luís Almeida">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="jPages.css">
<script src="jPages.min.js"></script>
<script>
/* when document is ready */
$(function() {
/* initiate plugin */
$("div.holder").jPages({
containerID: "itemContainer",
perPage: 10,
});
});
</script>
</head>
<body>
<div id="container" class="clearfix">
<!--! end of #sidebar -->
<div id="content" class="defaults">
<!-- item container -->
<ul id="itemContainer">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<!-- navigation holder -->
<div class="holder">
</div>
</div>
<!--! end of #content -->
</div>
<!--! end of #container -->
</body>
</html>
使用注意事项：
- 引入jquery和jpage扩展包，以及jpage.css分页样式；
- 对相应的内容块和分页块进行初始化，分别填入对应的class名字或者id；
- 分页class样式定义为holder，如果想使用jpage.css的话请加上这个class名；
- 分页数据内容在itemContainer里面，该插件的特点是把所有数据读取出来，插件会根据定义的配置自动进行数据分页显示；
- 相关的配置可以看jpage.js，支持实例化的时候自定义上一页下一页，分页数量等；
- 本插件只对可见元素有效，如果内容页为不显示状态，那么分页将无效（笔者就入坑了）；
最后需要特别说明，本插件只适用于小体量数据的分页展示，如评论分页、小数据列表分页等。不适合大量数据，毕竟所有数据是一次性读取出来的。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
