如何在 yii2 中使用带分页的 pjax

How to use pjax with pagination in yii2

我想在 yii2 中使用带分页的 pjax。

当用户点击下一页时,我只想重新加载一个 div 具有动态内容。

我在 div 的前后添加了 pjax::begin()pjax::end()

这是我的控制器代码:

 public function actionRestaurantDetails(){
    $this->layout = "detail";

    if(isset($_REQUEST['rid']) && !empty($_REQUEST['rid'])){
        $rid = $_REQUEST['rid'];
        $snRestaurantsDetail = Restaurants::find()->where(['id'=>$_REQUEST['rid']])->one();
        $snRestaurantMenuCategoryArr = MenuCategories::find()->where(["status"=>"1"])->all();
        $snRestaurantMenusArr = RestaurantMenu::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"])->all();
        $query = RestaurantsGallery::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"]);
         $snRestaurantgallerysArr = RestaurantsGallery::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"])->all();
       $pagination = new Pagination(['totalCount' => $query->count(), 'pageSize'=>3]);
         $models = $query->offset($pagination->offset)
        ->limit($pagination->limit)
        ->all();

        $snRestaurantLayoutsArr = $snRestaurantsDetail->getRestaurantLayouts();
        $snRestaurantTablesArr = $snRestaurantsDetail->getRestaurantTables();
        $snRestaurantWorkingHoursArr = $snRestaurantsDetail->getRestaurantWorkingHours();
        $snRestaurantMealTimesArr = $snRestaurantsDetail->getRestaurentMealTimes();

        //p($snRestaurantsDetail);
    }
    return $this->render('restaurant_detail', [
        'snRestaurantsDetail' => $snRestaurantsDetail,
        'snRestaurantMenuCategoryArr' => $snRestaurantMenuCategoryArr,
        'snRestaurantMenusArr' => $snRestaurantMenusArr,
        'snRestaurantMealTimesArr' => $snRestaurantMealTimesArr,
        'snRestaurantWorkingHoursArr' => $snRestaurantWorkingHoursArr,
        'snRestaurantgallerysArr' => $snRestaurantgallerysArr,
        'models' => $models,
        'pagination' => $pagination,
    ]);
}

这是我的观点:

<?php
use common\models\RestaurantMenu;
use yii\widgets\Pjax;
?>
<div class="container">
  <div class="row align-items-center site-vh-100">
    <div class="col-md-12">
      <?php
      $url = Yii::getAlias('@web')."/img/chiefs-rs-text.png";
      ?>
      <!--   <a class="brand" href="#"><img src="<?php echo $url; ?>" width="35%" height="35%"></a> -->
      <h1 class="site-heading site-animate mb-3"><?= !empty($snRestaurantsDetail) ? $snRestaurantsDetail->name : "-" ?></h1>
      <h2 class="h5 site-subheading mb-5 site-animate">Please book our restaurant now</h2>
      <?php if(Yii::$app->user->isGuest){ ?>
      <p>For Booking Restaurant :<a href="<?= Yii::$app->urlManager->createUrl(['site/index']) ?>" class="btn btn-secondary btn-lg book_restaurant">Register Now</a></p>
    <?php }else{ ?>
       <p><a href="<?= Yii::$app->urlManager->createUrl(['users/book']) ?>" class="btn btn-secondary btn-lg book_restaurant">Book Now</a></p>
    <?php } ?>
    </div>

  </div>
</section>
<section class="site-section section_details" id="section-about">
  <div class="container">
    <div class="row">
      <div class="col-md-5 site-animate mb-5">
        <h4 class="site-sub-title">Our Story</h4>
        <h2 class="site-primary-title display-4">Welcome</h2>
        <p><?= !empty($snRestaurantsDetail->description) ? $snRestaurantsDetail->description : "No contents found."  ?></p>
        <!--  <p class="mb-4">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> -->
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-6 site-animate img" data-animate-effect="fadeInRight">
        <img src="<?= ($snRestaurantsDetail->photo) ? Yii::getAlias('@web')."../../../uploads/".$snRestaurantsDetail->photo : "No image uploaded"?>" alt="chiefsRS" class="img-fluid" style="width:100%;height: 60vh">
      </div>
    </div>
  </div>
</section>
<section class="site-section section_details" id="section-menu">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center mb-5 site-animate">
        <h2 class="display-4">Delicious Menu</h2>
        <div class="row justify-content-center">
          <div class="col-md-7">
            <p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
          </div>
        </div>
      </div>

      <div class="col-md-12 text-center">
        <ul class="nav site-tab-nav nav-pills mb-5" id="pills-tab" role="tablist">
          <?php
          if(!empty($snRestaurantMenuCategoryArr)){
          foreach ($snRestaurantMenuCategoryArr as $key => $category) { ?>
          <li class="nav-item site-animate">
            <a class="nav-link <?= (strtolower($category->name) == "breakfast") ? 'active' : '' ?>" id="pills-<?= strtolower($category->name)?>-tab" data-toggle="pill" href="#pills-<?= strtolower($category->name)?>" role="tab" aria-controls="pills-<?= strtolower($category->name);?>" aria-selected="true"><?= $category->name;?></a>
          </li>
          <?php }
          }
          ?>
        </ul>
        <div class="tab-content text-left">
          <?php
          if(!empty($snRestaurantMenuCategoryArr)){
          foreach ($snRestaurantMenuCategoryArr as $key => $category) { ?>
          <div class="tab-pane fade <?= (strtolower($category->name) == "breakfast") ? 'show active' : '' ?>" id="pills-<?= strtolower($category->name)?>" role="tabpanel" aria-labelledby="pills-<?= strtolower($category->name)?>-tab">
            <div class="row">

              <?php
              $breakfastMenu =  RestaurantMenu::find()->where(['restaurant_id'=>$_REQUEST['rid'],'menu_category_id'=>$category->id,'status'=>"1"])->all();
              //  p($breakfastMenu);
              if(!empty($breakfastMenu)){
              foreach ($breakfastMenu as $key_menu => $menu) { ?>
              <div class="col-md-6 site-animate">
                <div class="media menu-item">
                  <img class="mr-3" src="<?php echo Yii::getAlias('@web')."/../../uploads/".$menu->photo; ?>" class="img-fluid" alt="chiefsRS">
                  <div class="media-body">
                    <h5 class="mt-0"><?= !empty($menu->name) ? $menu->name : ""?></h5>
                    <p><?= !empty($menu->description) ? $menu->description : ""?></p>
                    <h6 class="text-primary menu-price"><?= !empty($menu->price) ? "$".$menu->price : ""?></h6>
                  </div>
                </div>
              </div>
              <?php
              }
              }
              ?>  
            </div>
          </div>
          <?php }
          }
          ?>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END section -->
 <?php
      Pjax::begin(['id' => 'gallery_r','timeout'=>100000]); ?>
<section class="site-section section_details" id="section-gallery">
  <div class="container">
    <div class="row site-custom-gutters">
      <div class="col-md-12 text-center mb-5 site-animate">
        <h2 class="display-4">Gallery</h2>
        <div class="row justify-content-center">
          <div class="col-md-7">
            <p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
          </div>
        </div>
      </div>
      <div id="categories"></div>


<?php if (!empty($models)) {
      foreach ($models as $key => $image) {
          ?>
          <div class="col-md-4 site-animate">
              <a href="<?php echo Yii::getAlias('@web') . "../../../uploads/" . $image->image_name; ?>" class="site-thumbnail image-popup">
                  <img src="<?php echo Yii::getAlias('@web') . "../../../uploads/" . $image->image_name; ?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title; ?>">
              </a>
          </div>
      <?php
      }
}
?>
    </div>
  </div>
</section>
  <?php  echo \yii\widgets\LinkPager::widget([
        'pagination' => $pagination,
    ]);

    Pjax::end();?>
<!-- END section -->
<section class="site-section section_details bg-light" id="section-contact">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center mb-5 site-animate">
        <h2 class="display-4">Get In Touch</h2>
        <div class="row justify-content-center">
          <div class="col-md-7">
            <p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
            <p class="text-black">
              <?php
              if(!empty($snRestaurantsDetail)){ ?>
              Address: <br><?= $snRestaurantsDetail->address; ?><br>
              Phone: <br><?= $snRestaurantsDetail->contact_no; ?><br> <br>
              Email: <br> <a href="mailto:<?= $snRestaurantsDetail->email; ?>"><?= $snRestaurantsDetail->email; ?></a>
              <?php } ?>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div id="map"></div>
<?php// p($snRestaurantsDetail); ?>
<input type="hidden" name="lat" id="lat" value="<?= $snRestaurantsDetail->lattitude; ?>">
<input type="hidden" name="long" id="long" value="<?= $snRestaurantsDetail->longitude; ?>">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvpANF446OIBFdLaqozAf-lheEZ__oVVg&libraries=geometry"></script>
<script type="text/javascript">
  $.pjax.reload({container: '#gallery_r'});
</script>


     <?php Pjax::begin(['id'=>'gallery_r']);
          if(!empty($models)){
            foreach ($models as $key => $image) { ?>
                  <div class="col-md-4 site-animate">
                  <a href="<?php echo Yii::getAlias('@web')."../../../uploads/".$image->image_name;?>" class="site-thumbnail image-popup">
                  <img src="<?php echo Yii::getAlias('@web')."../../../uploads/".$image->image_name;?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title;?>">
            </a>
          </div>
            <?php }
            Pjax::end();
                  echo \yii\widgets\LinkPager::widget([
                  'pagination' => $pagination,
]);
          }?>

这是我的 js 代码:

$.pjax.reload({container: '#gallery_r'});

我调用这个 jquery 在 pjax 加载后添加 class 以显示内容:

jQuery(document).on("pjax:success", "#gallery_r",  function(event){
            contentWayPoint();
          }
        );

var contentWayPoint = function() {
        var i = 0;
        $('.site-animate').waypoint( function( direction ) {

            if( direction === 'down' && !$(this.element).hasClass('site-animated') ) {

                i++;

                $(this.element).addClass('item-animate');
                setTimeout(function(){

                    $('body .site-animate.item-animate').each(function(k){
                        var el = $(this);
                        setTimeout( function () {
                            var effect = el.data('animate-effect');
                            if ( effect === 'fadeIn') {
                                el.addClass('fadeIn site-animated');
                            } else if ( effect === 'fadeInLeft') {
                                el.addClass('fadeInLeft site-animated');
                            } else if ( effect === 'fadeInRight') {
                                el.addClass('fadeInRight site-animated');
                            } else {
                                el.addClass('fadeInUp site-animated');
                            }
                            el.removeClass('item-animate');
                        },  k * 50, 'easeInOutExpo' );
                    });

                }, 100);

            }

        } , { offset: '95%' } );
    };

然后单击一个按钮,我这样称呼 URL:

<p class="mb-0"><a href="<?php echo Yii::$app->urlManager->createUrl(['site/restaurant-details',"rid"=>$restaurant->id]) ?>" class="btn btn-primary btn-sm">Read More</a></p>

此 URL 调用为 ajax 调用并仅加载 pjax 容器 div,当我手动重新加载此页面时,它将显示整个 page.I 不要知道为什么会这样吗?

您应该将 LinkPager 移动到 Pjax 范围内。

<?php
Pjax::begin(['id' => 'gallery_r']);

if (!empty($models)) {
    foreach ($models as $key => $image) {
        ?>
        <div class="col-md-4 site-animate">
            <a href="<?php echo Yii::getAlias('@web') . "../../../uploads/" . $image->image_name; ?>" class="site-thumbnail image-popup">
                <img src="<?php echo Yii::getAlias('@web') . "../../../uploads/" . $image->image_name; ?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title; ?>">
            </a>
        </div>
    <?php
    }

    echo \yii\widgets\LinkPager::widget([
        'pagination' => $pagination,
    ]);

    Pjax::end();
}
?>