Question

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

vue中的模板。

html.i-amphtml-singledoc>body {
    overflow: visible!important;
    position: relative!important;
}

Vue.js

<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>

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 /控制器/ 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 /控制器/ 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 /组件/ 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-保存vue-good-table

有关更多信息，请检查此链接：

Vue Laravel Tutorial Part 7 – Datatables

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');

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

$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，您可以轻松愉快的方式使用您的表格分页

如何在Vue laravel表中创建分页

3 个答案: