Question

需要：在适当的框架中通过AJAX动态加载内容Yii。正如在https://duckduckgo.com/?q=yii中实现的那样，当向下滚动页面时，页面末尾的内容会自动添加。

我有什么：

查看：

<!--MAIN CONTENT AREA-->
<div class="wrap">
    <div class="container inner_content">
        <div class="row advertisement_row">
            <!-- portfolio_block -->
            <div class="projects">
<?php
    foreach ($models as $one)
    {
?>
                <div class="span3 element category01 advertisement" data-category="category01">
                    <div class="hover_img">
                        <img src="<?php echo Yii::app()->request->baseUrl; ?><?=$one->picture_1?>" alt="" />
                    </div>
                    <div class="item_description">
                        <?php $title = implode(array_slice(explode('<br>',wordwrap($one->title,60,'<br>',false)),0,1))."...";?>
                        <h6><?=CHtml::link($title, array('view', 'id'=>$one->id))?></h6>
                        <div class="descr"><?=implode(array_slice(explode('<br>',wordwrap($one->content,240,'<br>',false)),0,1))."..."?></div>
                    </div>
                </div>
<?php
    }
?>
                <div class="clear"></div>
            </div>
            <!-- //portfolio_block -->
        </div>

    </div>
</div>

提示如何实施此服务？

Answer 1

你需要一个像无限滚动的javascript / jquery插件，请参阅www.infinite-scroll.com 这有助于将多页结果转换为单页结果，动态加载，如在twitter或duckduckgo中。

您直接为您的页面集成了这样的插件，或者您可以考虑在扩展库中为Yii提供几种集成

无限滚动寻呼机（link）
无限滚动（link）

请注意，这些扩展依赖于分页变量的存在来加载每个后续页面。因此，如果您在视图中使用基于CListView，CGridView或类似CPagination的渲染窗口小部件，它们将会发挥最佳效果。

Answer 2

您可以在不使用Yii扩展程序或jquery插件的情况下，通过探测滚动位置何时到达屏幕底部来实现此目的。

这就是我的做法。

var page = 0;

function loadnewdata()
{
// do ajax stuff, update data.
     var url         = '$showlistingUrl'+'/page/'+page;

     $.ajax({ url: url,
              cache: false,
              success: function(data){
                var existing_content = $('#listing_container').html();

                 $('#listing_container').replaceWith('<div id="listing_container">'+existing_content+data+'</div>');

                 page++;
              },
              dataType: "html"
                });
}

setInterval(
  function ()
  {
    if(($(document).height() - $(window).height() - $(document).scrollTop()) < 500){
       loadnewdata();
    }
  },
  500
);

// Run the initial listing load.
loadnewdata();

控制器页面依次查询“page”GET参数并使用它来从数据库中获取数据。

public function actionShowlisting()
{

    $argPage       = (int) Yii::app()->request->getQuery('page', 0);


    // /////////////////////////////////////////////////////////////////////
    // Get a listing of results
    // /////////////////////////////////////////////////////////////////////
    $dbCriteria             = new CDbCriteria;
    $dbCriteria->limit      = (int) Yii::app()->params['PAGESIZEREC'];
    $dbCriteria->offset     = $argPage * $dbCriteria->limit;


    $listResults   = Mymodel::model()->findAll($dbCriteria);

    $this->renderPartial('result_list', array('listResults' => $listResults));

}

在Yii中通过AJAX动态加载内容？

2 个答案: