现在很多网站都使用了无线滚动分页了，像新浪微博，滚动到底部就会加载新的数据。这个功能我也是很早就想学习了，这次终于算是理通了。在此做下笔记，也算是对大家的福利分享。
ThinkPHP结合jquery.ias.js无线滚动分页
controller中的代码
//jquery-ias.js插件无限滚动分页插件
public function indexIAS(){
$province=M('Province');
$count=$province->count();
$page=new \Think\Page($count,10);
$show=$page->show();
$list=$province->limit($page->firstRow.','.$page->listRows)->select();
//$list=$province->page($_GET['p'],$page->listRows)->select();
$this->assign('province',$list);
$this->assign('page',$show);
$this->display();
}
html中的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ThinkPHP无线滚动分页功能</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div id="posts">
<foreach name="province" item="u">
<div style="line-height:30px; font-size:20px;">
<span><{$u.provinceid}></span>
<span><{$u.name}></span>
</div>
</foreach>
</div>
<{$page}>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-ias.min.js"></script>
<script>
$(function(){
var ias = jQuery.ias({
container: '#posts',
item: '.post',
pagination: '#tp_pagination',
next: '.next'
});
//添加一个加载的图片，当加载数据是显示该图片
ias.extension(new IASSpinnerExtension());
//在offset设置的值之后添加一个链接，这个链接用来点击加载下一页内容
//如本例设置的3，即自动加载了3页之后，将出现 加载更多 连接，用来点击手动加载内容
ias.extension(new IASTriggerExtension({
text:'加载更多数据',
offset: 3
}));
//当数据加载完后，显示的文本
ias.extension(new IASNoneLeftExtension({
text: "没有数据了！"
}));
});
</script>
</body>
</html>
运行结果
总结
这个功能的实现是结合了ThinkPHP中自带的分页类完成的，先是ThinkPHP的分页代码实现了类似如下的代码。
<div id="pagination"> <a href="/page2/" class="next">next</a> </div>
这样IAS插件才有内容可选。
ThinkPHP分页类返回的分页代码如下
<div> <span class="current">1</span> <a class="num" href="/index.php/Home/Index/indexIAS/p/2.html">2</a> <a class="num" href="/index.php/Home/Index/indexIAS/p/3.html">3</a> <a class="num" href="/index.php/Home/Index/indexIAS/p/4.html">4</a> <a class="next" href="/index.php/Home/Index/indexIAS/p/2.html">>></a> </div>
可见，分页的链接只是用div包裹了一下，这个div无id，无class。而IAS插件需要一个ID指向的div才能有效获取下一页链接。于是我修改了下ThinkPHP分页类Page的返回div加上了id="tp_pagination"代码，这样就会返回如下代码，这样就符合了要求。
<div id="tp_pagination"> <span class="current">1</span> <a class="num" href="/index.php/Home/Index/indexIAS/p/2.html">2</a> <a class="num" href="/index.php/Home/Index/indexIAS/p/3.html">3</a> <a class="num" href="/index.php/Home/Index/indexIAS/p/4.html">4</a> <a class="next" href="/index.php/Home/Index/indexIAS/p/2.html">>></a> </div>
经过折腾，发现顺利可用。这样也算是找到了一条能够实现无限滚动分页的路子。
I’m still learning from you, while I’m trying to achieve my goals. I absolutely enjoy reading all that is posted on your blog.Keep the information coming. I loved it!