Membuat Blog dengan Laravel & VueJS - #21 | Paginasi - /allcategories

Setelah halaman allposts yang menampilkan data pos kita beri paginasi, kita akan membuat juga untuk halaman allcategories yang menampilkan semua data kategori.

Cara pembuatannya ini sebenarnya sama seperti dalam pembuatan paginasi untuk halaman allposts, dan untuk komponen pagination.vue tinggal kita gunakan kembali atau di import.

CategoryController.php

Pertama kita buka CategoryController.php dan kita tambahkan paginasi dengan json.

//CategoryController.php
public function index()
{ 
$categories = Category::orderBy('id', 'asc')->paginate(2);

$response = [
   'pagination' => [
     'total' => $categories->total(),
     'per_page' => $categories->perPage(),
     'current_page' => $categories->currentPage(),
     'last_page' => $categories->lastPage(),
     'from' => $categories->firstItem(),
     'to' => $categories->lastItem()
      ],
    'data' => $categories
  ];
      
return response()->json($response);
}

Komponen AllCategories.vue

Kemudian kita buka komponen AllCategories.vue dan kita buat paginasinya.

Silahkan ubah template yang ada dengan template dibawah ini:

//AllCategories.vue
<template>
  <div>
    <div class="_container">
      <div class="admin-page-title">All Categories</div>
      <span v-if="successful" class="label label-danger"><h4>deleted!</h4><p>(Pos berhasil dihapus.)</p></span>
        <div class="h_wrap">
          <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>  
              <th>Name</th>   
              <th>Actions</th>
            </tr>
          </thead>
          <tbody v-for="category in categories">
            <tr >
              <td>{{ category.id }}</td>  
              <td style="width:600px">{{ category.name }}</td>   
              <td> 
              <router-link :to="{ name: 'editcategory', params: { categoryId: category.id } }">
                <button type="button" class="btn btn-primary">
                    Edit 
                </button>
              </router-link>
                <button type="button" @click="deleteCategory(category.id)" class="btn btn-danger">Delete</button>
              </td>
            </tr>
          </tbody>
         </table>  
          <pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="getCategories()"></pagination>
      </div>
    </div>
</div>
</template>

<script>
import pagination from './Pagination.vue';

export default {
  components: {
      pagination
  },

  data:function() {
    return { 
      categories: [], 
      successful: false,
      pagination: {
            'current_page': 1
      },
    }
  },
  created: function () { 
      this.getCategories();
  },
   methods: {
      getCategories() {
        axios.get('/api/categories?page=' + this.pagination.current_page)
        // axios.get('/api/categories')
          .then(response => {
            // console.log(response.data.data.data);
              this.categories = response.data.data.data;
              this.pagination = response.data.pagination;
          })
          .catch(error => {
              //
        });
    },
     deleteCategory(id) {
        axios.delete("/api/categories/" + id)
          .then(response => {
            console.log('deleted!');
            this.getCategories();
            this.successful = true;
          });
    } 
  }
};
</script>

<style scoped>
  .table-bordered{
    background-color: #ffffff;
  }
  .label-danger {
    color: #f1f1f1;
    display: inline-block;
    margin-bottom: 17px;
    background: #dc3545eb;
    width: 100%;
    padding: 5px 15px;
  } 
  .label-danger h4, .label-danger p{
    margin-bottom: 0;
  }
</style>

Urutan part / bagian dari tutorial ini bisa dilihat pada: Membuat Blog Menggunakan Framework Laravel-Vue.js.