Pagination Within List Views

1

I have a controller which i am rendering different listviews on the same view. when i click pagination of each listview it is redirecting to main list view . how do i fix this. here is my controller return $this->render(‘index’, [
‘searchModel’ => $searchModel,
‘allDataProvider’ => $allDataProvider,
‘topTrendingSongs’ => $topTrendingSongs,
‘top20DataProvider’=>$top20DataProvider,
‘artistOfTheWeek’=>$artistOfTheWeek,
‘gospelDataProvider’=>$gospelDataProvider,
‘localDataProvider’=> $localDataProvider,
‘internationalDataProvider’=>$internationalDataProvider,
‘bibleDataProvider’=>$bibleDataProvider,
‘bongoDataProvider’=>$bongoDataProvider,
‘callDataProvider’=>$callDataProvider,
‘wackyDataProvider’=>$wackyDataProvider,
‘islamicDataProvider’=>$islamicDataProvider,
‘vernacularDataProvider’=> $vernacularDataProvider,
‘naijaDataProvider’=>$naijaDataProvider,
‘imageFiles’=>$imageFiles

    ]); and some of the viiew 

<?= ListView::widget([
    'id' => 'mainListView',
    'dataProvider' => $allDataProvider,
    'itemView' => function ($model, $key, $index, $widget) {
        $songName = $model->getAttribute('SongName');
        $artistName = $model->getAttribute('ArtistName');

//        // Log the retrieved attributes to debug
//        var_dump($songName, $artistName);
//        exit();
        return
            '<div class="col-lg-12 col-md-12 col-sm-3 col-xs-3 mb-4">'
            . '<div class="card shadow custom-rounded">'
            . '<div class="card-body text-center">'
            . Html::img(Yii::$app->request->baseUrl . '/images/skizalogo.png', ['class' => 'card-img-top smaller-image', 'alt' => 'Default Image'])
            . Html::hiddenInput('SkizaCode', $model['SkizaCode'])
            . '<h5 class="card-title">' . Html::encode($model['SongName']) . '</h5>'
            . '<h6 class="card-title">' . Html::encode($model['ArtistName']) . '</h6>'
            . '<a href="#" class="btn btn-outline-success rounded-pill get-skiza" 
                data-skiza-code="' . Html::encode($model->getAttribute('SkizaCode')) . '" 
                data-song-name="' . Html::encode($songName) . '" 
                data-artist-name="' . Html::encode($artistName) . '">Get Skiza</a>'
            . '</div></div></div>';
        },
    'options' => ['class' => 'row'],
    'layout' => '<div class="row row-cols-1  row-cols-lg-3 row-cols-md-2 g-3">{items}</div><div class="d-flex justify-content-center mt-3">{pager}</div>',
    'pager' => [
        'class' => \yii\bootstrap5\LinkPager::class,
        'options' => [
            'class' => 'pagination justify-content-center',
        ],
        'prevPageLabel' => 'Previous',
        'nextPageLabel' => 'Next',
        'maxButtonCount' => 5,
        'pagination' => [
            'params' => ['main-page' => true],
        ],
    ],
]); ?>
<?= ListView::widget([ 'id' => 'top20ListView', 'dataProvider'=>$top20DataProvider, 'itemView' => function ($model, $key, $index, $widget) { return '
' . '
' . '
' . Html::img(Yii::$app->request->baseUrl . '/images/skizalogo.png', ['class' => 'card-img-top smaller-image', 'alt' => 'Default Image']) . Html::hiddenInput('SkizaCode', $model['SkizaCode']) . '
' . Html::encode($model['SongName']) . '
' . '
' . Html::encode($model['ArtistName']) . '
' . 'Get Skiza' . '
'; }, 'options' => ['class' => 'row'], 'layout' => '
{items}
{pager}
', 'pager' => [ 'class' => \yii\bootstrap5\LinkPager::class, 'options' => [ 'class' => 'pagination justify-content-center', ], 'prevPageLabel' => 'Previous', 'nextPageLabel' => 'Next', 'maxButtonCount' => 5, 'pagination' => [ 'params' => ['top20-page' => true], ], ], ]); ?>

i tried using pjax which works locally but when i run the application on a slow server its not working as expected

2

Pagers must have a way to differentiate each other. Check this question. It is not Yii core widget but should help you understand the problem as well as what to do