Laravel8では
・inertia.js を選択すればvue.jsで作成されたスキャフォールディングを使用する。
・Livewire を選択すれば PHP + Blade + ajax で作成されたスキャフォールディングを使用する。
・Laravel Breeze をインストールすればPHP + Bladeのみで作成されたスキャフォールディングを使用する。
composer require livewire/livewire
php artisan livewire:publish
以下のタグで livewire を読み込みます
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
composer require rappasoft/laravel-livewire-tables
php artisan make:livewire posts-table
touch app/Http/Livewire/PostsTable.php
以下の内容で作成します
welcome.blade.php
@extends('layout')
@section('content')
@yield('content__header')
@yield('content__search')
<div class="row">
<div class="col-md-12">
@livewire('posts-table')
</div>
</div>
@endsection
resources/views/livewire/posts-table.blade.php
<div>
<div class="row">
<div class="col">
<input wire:model="search" class="form-control" type="text" placeholder="Search books...">
</div>
</div>
<div class="row">
<table class="table table-hover table-condensed table-striped table-bordered table_sm">
<thead>
<tr>
<th class="sortable">ID</th>
<th class="sortable">
<a wire:click.prevent="sortBy('title')" role="button" href="#">
Title
</a>
</th>
<th class="sortable">
<a wire:click.prevent="sortBy('author_id')" role="button" href="#">
Author
</a>
</th>
</tr>
</thead>
<tbody>
@foreach ($posts as $post)
<tr>
<td>{{ $post->id }}</td>
<td>{{ $post->name }}</td>
<td>{{ $post->content_name }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
app/Http/Livewire/PostsTable.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class PostsTable extends Component
{
use \Livewire\WithPagination;
public $perPage = 10;
public $search = '';
public $sortField = 'id';
public $sortAsc = true;
public function render()
{
$posts = \App\Post::search($this->search)
->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
->paginate($this->perPage);
return view('livewire.posts-table', ['posts' => $posts]);
}
}
https://github.com/imliam/awesome-livewire
livewire では vue.js や react と異なり、ajaxでhtmlコードを返します。
検索はサーバーサイド( DBによる再select )を使用します。