现在很多网站都使用了无线滚动分页了,像新浪微博,滚动到底部就会加载新的数据。这个功能我也是很早就想学习了,这次终于算是理通了。在此做下笔记,也算是对大家的福利分享。
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!