如何在 Vue laravel 表中创建分页

Question

我是 laravel 中 vue.js 的新手。我有一个数组数据，显示在 vue 的表格中。我想为每 15 个数据创建分页。我怎样才能做到这一点？有什么想法吗？

vue 中的模板。

<tbody>
    <tr v-for="booking in bookings">
        <td>{{ booking.booking_number | formatBookingNumber }}</td>
        <td>{{ booking.date }}</td>
        <td>{{ booking.status }}</td>
        <td>{{ booking.check_in_date }}</td>
        <td>{{ booking.check_out_date }}</td>
        <td>
        </td>
    </tr>
</tbody>

Vue.js

<script>
export default {
    props: ['bookings'] ..................

Answer 1

修改和补充

如果您尚未实现 REST 端点，我建议使用 Transformers 来实现。之后，您可以遵循下一个用例：

应用程序/变压器/BookingsTransformer.php

public function transform($booking) {
    return [
        'booking-id' => $booking->booking_id,
        'booking-data' => $booking->booking_date,
        'booking-status' => $booking->booking_status,
        'checkin' =>    $booking->booking_checkin,
        'checkout' =>   $booking->booking_checkout,
    ];
}

应用程序/Http/Controllers/BookingsResourceController.php

use EllipseSynergie\ApiResponse\Contracts\Response;
use App\Models\Bookings;
use App\Transformer\BookingsTransformer;

class ImageController extends Controller
{
  protected $response;

  public function __construct(Response $response)
  {
    $this->response = $response;
  }

  public function index()
  {
    //Get dataset's items
    $image = Bookings::paginate(10);
    // Return a collection of $images
    return $this->response->withPaginator($image, new  BookingsTransformer());
}

应用程序/Http/Controllers/BookingsController.php

use App\Models\Bookings;
use Illuminate\Http\Request;

class BookingsController extends Controller
{ 
  public function index()
  {
    return view('reservations');
  }

路线/api.php

Route::get('bookings-api','ImageController@index');

路线/web.php

Route::get('/Bookings','BookingsController@index','as' => 'reservations');

资源/视图/reservations.blade.php

<div class="container" id='app'>    
  <reservation-list></reservation-list>
</div>    

同时，你必须在 Laravel 项目中安装 npm 和 pagination 包：

npm install

npm install vuejs-paginate --save

npm run watch

资源/资产/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component(
   'image-list',
   require('./components/Bookings.vue')
);

Vue.component('paginate', require('vuejs-paginate'));

const app = new Vue({
    el: '#app'
})

资源/资产/js/Components/Bookings.vue

 <template>
  <tbody>
   <tr v-for="booking in bookings">
    <td>{{ booking.booking_number | formatBookingNumber }}</td>
    <td>{{ booking.date }}</td>
    <td>{{ booking.status }}</td>
    <td>{{ booking.check_in_date }}</td>
    <td>{{ booking.check_out_date }}</td>
   </tr>
  </tbody>

  <div class="centered">
    <paginate
    :page-count="pageCount"
    :margin-pages="2"
    :page-range="4"
    :initial-page="0"
    :container-class="'pagination'"
    :click-handler="fetch"
    :prev-text="'Prev'"
    :next-text="'Next'"
    ></paginate>
  </div>

</template>

<script>
  export default {

     data() {
       return {
         bookings: [],
         endpoint: 'api/bookings-api'
       };
     },

    created() {
      this.fetch();
    },

    methods: {
       fetch(page = 1) {
         axios.get(this.endpoint + page)
         .then(({data}) => {
             this.dataset = data.data;
             this.pageCount = data.meta.pagination.total_pages;
          });
       },
    }
  }
</script>

希望有帮助

Answer 2

你可以尝试使用 Vue Datatable 包： 在您的 vue laravel 应用程序中，您只需运行以下命令：

npm install --save vue-good-table

欲了解更多信息，请查看此链接：

Vue Laravel 教程第 7 部分 – 数据表

Answer 3

我将向您展示如何以简单的方式做到这一点。当然，您需要更改或添加代码才能使其在您的应用程序中工作。只需尝试理解逻辑即可。

Vue.js 组件：

<template>
   .....//here supposed to have more code
  <tbody>
  <tr v-for="booking in bookings">
    <td>{{ booking.booking_number | formatBookingNumber }}</td>
    <td>{{ booking.date }}</td>
    <td>{{ booking.status }}</td>
    <td>{{ booking.check_in_date }}</td>
    <td>{{ booking.check_out_date }}</td>
    <td>
    </td>
  </tr>
  </tbody>
  ... 
</template>
<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        bookings: [],
        page: 1, //change the page regarding your next and previous pagination button
        rowsPerPage: 15,
        totalItems: 0
         ..... 
      }
    },
    created () {
      axios.get('/bookings', {
        params: {
          page: this.page,
          rowsPerPage: this.rowsPerPage
        }
      })
        .then(response => {
          this.bookings = response.data.bookings
          this.totalItems = response.data.totalItems
        })
    }
  }
</script>

在 Laravel

routes/api.php

Route::get('/bookings','ControllerName@controllerFunctionName');

然后在您的函数中，在控制器中执行以下操作：

$page = $request->get('page');
$rowsPerPage = $request->get('rowsPerPage');
$skip = ($page - 1) * $rowsPerPage;

$bookings = YouBookingsModel::select(here put your query)->skip($skip)->take($rowsPerPage)->get();

$bookingsCount = YouBookingsModel::all()->count();

return response()->json([
 "bookings" => $bookings,
 "totalItems" => $bookingsCount
], 200);

请注意，您必须自己制作。但也要考虑使用材质框架。我正在使用Vuetify，这太棒了！！然后转到dataTables，您可以以简单而有趣的方式使用带分页的表格

Answer 4

如果你想在vue中使用分页 请使用这个。这是 vue 3 的简单且功能齐全的分页https://www.npmjs.com/package/pagination-vue3