Menambah Sorting dan Pagination pada ArrayDataProvider Yii2

Pada tutorial sebelumnya kita telah membahas masalah GridView menggunakan ArrayDataProvider,  dengan studi kasus “Menampilkan repo github pada gridview Yii2pada tutorial kali ini, kita akan menyambung pembahasan sebelumnya yang berjudul “Menampilkan repo github pada gridview Yii2 dengan ArrayDataProvider untuk itu sebelum melanjutkan kamu baca dulu pembahasan sebelumnya.

Untuk menambahkan sorting dan juga pagination pada ArrayDataProvider, kamu cukup menambahkan configurasi pada ArrayDataProvider, pada contoh dibawah ini, kita akan mencoba menambahkan sorting dan filtering terhadap kolom Id, Name, dan Updated At

<?php

/**
 * @author Chabib Nurozak <chabibdev@gmail.com>
 * @website chabibnr.net
 */

namespace app\controllers;

use yii\httpclient\Client;
use yii\web\Controller;
use yii\data\ArrayDataProvider;

class ApiGithubController extends Controller {

    public function actionIndex() {
        $client = new Client();
        $response = $client->get('https://api.github.com/users/chabibnr/repos')
            ->addHeaders(['user-agent' => 'Tutorial Yii2 by ChabibNr'])
            ->send();
        if ($response->isOk) {
            $dataFromApi = $response->data;
        }else{
            $dataFromApi = [];
        }
        $data = [];
        /* membuat struktur array baru berdasarkan data yang di ambil dari github untuk dimasukan ke ArrayDataProvider */
        foreach($dataFromApi as $repo){
            $data[] = [
                'id' => $repo['id'],
                'name' => $repo['name'],
                'owner' => $repo['owner']['login'],
                'url' => $repo['html_url'],
                'created_at' => $repo['created_at'],
                'updated_at' => $repo['updated_at']
            ];
        }
        $provider = new ArrayDataProvider([
            'allModels' => $data,
            'sort' => [
                'attributes' => ['id', 'name', 'updated_at'],
            ],
            'pagination' => [
                'pageSize' => 20,
            ],
        ]);
        return $this->render('index', [
            'dataProvider' => $provider
        ]);
    }

}

Pada kode diatas terdapat perubahan pada konfigurasi di ArrayDataProvider

$provider = new ArrayDataProvider([
            'allModels' => $data,
            'sort' => [
                'attributes' => ['id', 'name', 'updated_at'],
            ],
            'pagination' => [
                'pageSize' => 20,
            ],
        ]);

Pada key sort kita tinggal mendifisikan attribute-attribute yang ingin kita berikan sorting, sehingga tampilan akan terlihat seperti dibawah ini. Header untuk kolom yang bisa di urutkan akan berwarna biru, sedangkan untuk yang tidak bisa diurutkan akan berwarna hitam.

Sedangkan untuk mengatur pagination atau berapa banyak jumlah yang ditampilkan dalam 1 halaman adalah dengan menambahkan key pagination, secara default jumlah data yang ditampilkan dalam 1 halaman adalah 10. Sekarang mari kita ubah nilainya menjadi 20 kemudian segarkan halaman di browser dan lihat sekarang sudah menjadi 20 perhalaman.

 

Seberapa manfaat turorial ini?
Sending
User Review
5 (1 vote)
4 Comments
  1. kabayan
    • chabibnr
  2. kabayan
    • chabibnr

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.