douxi3432
2019-06-04 10:19
浏览 186
已采纳

如何在yii2中使用pjax和分页

I want to use pjax with pagination in yii2.

When user clicks on next page, i want to reload only one div with dynamic contents.

I have put pjax::begin() and pjax::end() before and end of my div.

This is my controller code :

 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,
    ]);
}

And this is my view :

<?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,
]);
          }?>

And this is my js code :

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

And I call this jquery to add class after pjax load to display contents :

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%' } );
    };

And on one button click I am calling this URL like this :

<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>

This URL calls as ajax call and loads only pjax container div, When i reload this page manually then it will display the whole page.I don't know why this happened ?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doukuipei9938 2019-06-04 13:11
    已采纳

    You should move the LinkPager inside the Pjax scope.

    <?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();
    }
    ?>
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题