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

}

[AdSense-A]

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.



 

6 Komentar

  1. […] Gimana sudah paham dengan ArrayDataProvider, sekarang mari kita lanjutkan untuk menambah sorting dan pagination.  […]

    BalasHapus
  2. Visitor Rating: 5 Stars

    BalasHapus
  3. Mas, setelah saya mengambil data dari api lalu saya tampilkan data yang dibutuhkan, saya ingin menyimpan data yang ditampilkan tersebut ke database lokal saya sendiri. Itu apa yang harus saya tambahkan. Mohon mas bantuannya.

    yang saya tau :
    model->new Tabel();
    .....

    BalasHapus
  4. pertama-tama menyiapkan tabel untuk menampung repositori nya,,
    kemudian tambahkan script penyimpanan didalam foreach,

    kamu bisa meletakan kodemu didalam sini
    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']
    ];
    }

    misalkan seperti ini
    foreach($dataFromApi as $repo){
    $model = new MyRepositoryModel();
    $model-> name = $repo['name'];
    $model->save();
    }

    BalasHapus
  5. Mas, saya sudah berhasil.
    Tapi bagaimana filter datanya dari repo agar bisa memanggil data repo ke form (misal ada data yang diperlukan ditaruh di dropdown)

    BalasHapus
  6. maaf slow respon, apakah sudah bisa?

    BalasHapus

Posting Komentar

Post a Comment

Lebih baru Lebih lama