[ThinkPHP]jquery.ias.js插件实现无限滚动分页插件

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

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中自带的分页类完成的,先是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>

经过折腾,发现顺利可用。这样也算是找到了一条能够实现无限滚动分页的路子。

分享到:更多 ()

171

评论前必须登录!

 

  1. #1

    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!