CODEWITHSUNDEEP
twitter-bootstrapyii2yii2-basic-app
Sao Ho
Sao Ho

Reputation: 139

Yii2 pagination within tabs

I’m working with TAB on yii2

<div class="container">
  <center><h1>Team</h1></center>
  <ul class="nav nav-tabs nav-justified">
    <li class="active"><a data-toggle="tab" href="#home">Introduction</a></li>
 <li><a data-toggle="tab" href="#menu1">Member</a></li>
  </ul>

  <div class="tab-content">
<div id="home" class="tab-pane fade in active">
      <h3>About</h3>
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tempus arcu, in placerat ex. Ut laoreet ornare dui quis maximus. Aenean sit amet tristique urna, in scelerisque augue. Sed sodales mi sit amet lectus efficitur rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin congue lectus id erat tempor vulputate. Curabitur in blandit odio, convallis posuere metus. Pellentesque dictum magna non purus ultrices viverra. Vestibulum ex orci, porttitor ac semper at, posuere sed turpis. Aenean varius libero id orci scelerisque egestas. Etiam dapibus ante ut mattis fringilla. Donec metus velit, vulputate sit amet laoreet at, pellentesque id risus. Phasellus tincidunt commodo mauris, iaculis aliquet nisl facilisis a.
</p>
   </div>
 <div id="menu1" class="tab-pane fade">
      <?php foreach($models as $model) { ?>
      <h3><?=$model->id; ?></h3>
      <p><?=$model->name; ?></p>
   <?php } ?>
   <?php echo \yii\widgets\LinkPager::widget([
    'pagination' => $pagination,
]); ?>
  </div>
</div>

My function in controller

public function actionIndex()
{
    $query = Teams::find();
    $teams = $query->all();
    $count = count($teams);
    $pagination = new Pagination(['totalCount' => $count, 'pageSize'=>10]);
    $models = $query->offset($pagination->offset)
    ->limit($pagination->limit)
    ->all();
return $this->render('index', [
        'models' => $models,
        'pagination' => $pagination,
    ]);
}

I used pagination to paging content of 1 tab (member), but the page is automatically refresh to default tab Team when I click to page 2,3,4… Is there anyways to make paging inside tab working? Thanks

Upvotes: 1

Views: 1201

Answers (2)

Touqeer Shafi
Touqeer Shafi

Reputation: 5284

Cause:

When you click on the pagination link page get refreshed and you lost the state in the view because of the jQuery or javascript plugin.

Solution:

In your controller add:

    if (Yii::$app->request->get('page', false) != false) { // page is your pagination parameter
        $this->registerJs(
    "jQuery(document).ready(function(){ $('#member_tab').click() })",
    View::POS_END,
    'member_tab_clicker' // Unique Handler For JS Block
);
    }

And in your html update link to add ID attribute:

<a data-toggle="tab" href="#menu1" id="member_tab">Member</a>

Make sure you have included jquery in your project. It's not the standard way but it will solve your problem.

Upvotes: 0

Jackson Tong
Jackson Tong

Reputation: 657

Use yii\widgets\Pjax, it's gonna fetch the content inside the pjax's block only

<?php Pjax::begin() ?>
    <?php foreach($models as $model) { ?>
        <h3><?=$model->id; ?></h3>
        <p><?=$model->name; ?></p>
    <?php } ?>
    <?php echo \yii\widgets\LinkPager::widget([
        'pagination' => $pagination,
    ]); ?>
<?php Pjax::end() ?>

Upvotes: 4

Related Questions