Yii2 - GridViewのListView for jQuery.click（）

Question

私は自分自身を作成するListViewを持っています。私はkartik\grid\GridViewを使ってGridViewを持っています。

両方とも対応するページで正常に動作します。それらは$dataProviderと$searchModelのような同じパラメータを使用します。

<div id="grid"> 
    <?= GridView::widget([....]); ?> 
</div> 

そして

<div id="list"> 
    <?= ListView::widget([....]); ?> 
</div> 

問題は、私は同じページ上に置くとき、二つ目は、その双方向性を失い、ある - ページネーションのようなものを、例えば。 ListViewのGridViewをスワップするためのjQuery.click（）ボタンがありますが、機能しません。

$("#presentation-switcher").click(function() { 
    $("#data-view").load("_list.php"); 
}); 

私はさまざまなID、異なるデータ配備などで実験しましたが、役に立たないものです。おそらく私は間違ったアプローチを取っていますか？何か案は？

Answer 1

：

<?= 
ListView::widget([ 
    'dataProvider' => $listDataProvider, 
    'options' => [ 
     'tag' => 'div', 
     'class' => 'list-wrapper', 
     'id' => 'list-wrapper', 
    ], 
    'layout' => "{pager}\n{items}\n{summary}", 
    'itemView' => '_list_item', 
]); 
?> 

を

More Detail

Answer 2

次のような、Pjax内のGridViewやListViewのウィジェットを置くことを試みることができる：

\yii\widgets\Pjax::begin(); 
     echo GridView::widget([ 
     ]); 
\yii\widgets\Pjax::end(); 

と

_list_itemなどのアイテムビューの新しいページに設定

\yii\widgets\Pjax::begin(); 
     echo ListView::widget([ 
     ]); 
\yii\widgets\Pjax::end(); 

Answer 3

次のことを試してみてください。GridViewで

はfalseとしてshowFooterを設定します。

'panel' => [ 
    'showFooter' => false, 
    //Other settings you may wan 

    'heading' => '<h3 class="panel-title"><i class="iconLeft fa fa-th-list"></i> '.Yii::t('app/buttons', 'list').' '.$title.'</h3>', 
    'type' => 'success', 
    //'before' => Html::a('<i class="iconLeft fa fa-plus"></i> '.Yii::t('app/buttons', 'create'), ['create'], ['class' => 'btn btn-success']), 
    //'after' => Html::a('<i class="iconLeft fa fa-repeat"></i> '.Yii::t('app/buttons', 'reset_grid'), ['index'], ['class' => 'btn btn-info']), 
], 

そして、明示的にページャのオプションを追加します。

'pager' => [ 
    'options' => ['class' => 'pagination'], // set class name used in ui list of pagination 
    'prevPageLabel' => '<i class="fa fa-angle-left"></i>', // Set the label for the "previous" page button 
    'nextPageLabel' => '<i class="fa fa-angle-right"></i>', // Set the label for the "next" page button 
    'firstPageLabel' => '<i class="fa fa-angle-double-left"></i>', // Set the label for the "first" page button 
    'lastPageLabel' => '<i class="fa fa-angle-double-right"></i>', // Set the label for the "last" page button 
    'nextPageCssClass' => 'next', // Set CSS class for the "next" page button 
    'prevPageCssClass' => 'prev', // Set CSS class for the "previous" page button 
    'firstPageCssClass' => 'first', // Set CSS class for the "first" page button 
    'lastPageCssClass' => 'last', // Set CSS class for the "last" page button 
    'maxButtonCount' => 10, // Set maximum number of page buttons that can be displayed 
], 

また、あなたが\yii\widgets\Pjax::begin();を設定する必要はありませんし、 \yii\widgets\Pjax::end();kartik\grid\GridViewはデフォルトでPjaxを使用しているためです。