A Vue.js Datatable Component for Laravel that works with Bootstrap.
This package makes use of an optional default component, the Laravel Vue Pagination component created by gilbitron. If you need a pagination component for other areas of your website and you are using a Laravel API & Bootstrap, i highly suggest using this flexible component.
See https://jamesdordoy.github.io/laravel-vue-datatable/
$ composer require jamesdordoy/laravelvuedatatable
JamesDordoy\LaravelVueDatatable\Providers\LaravelVueDatatableServiceProvider::class,
$ php artisan vendor:publish --provider="JamesDordoy\LaravelVueDatatable\Providers\LaravelVueDatatableServiceProvider"
[
'models' => [
"alias" => "as",
"search_term" => "searchable",
"order_term" => "orderable",
],
"default_order_by" => "id"
]This trait is optional and simply provides a basic method for filtering your data based on the $dataTableColumns attribute set in the model. If you would like more control on how the data is filtered, feel free to omit this trait use your own filtering methods. Just remember to paginate the results!
<?php
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use JamesDordoy\LaravelVueDatatable\Traits\LaravelVueDatatableTrait;
class User extends Authenticatable
{
use Notifiable, LaravelVueDatatableTrait;
protected $dataTableColumns = [
'id' => [
'searchable' => false,
],
'name' => [
'searchable' => true,
],
'email' => [
'searchable' => true,
]
];
}The Collection Resource is expecting a paginated collection, so feel free to use your own queries and omit the provided query if your require more complex filtering.
<?php
namespace App\Http\Controllers;
use App\User;
use Illuminate\Http\Request;
use JamesDordoy\LaravelVueDatatable\Http\Resources\DataTableCollectionResource;
class UserController extends Controller
{
public function index(Request $request)
{
$length = $request->input('length');
$orderBy = $request->input('column'); //Index
$orderByDir = $request->input('dir', 'asc');
$searchValue = $request->input('search');
$query = User::eloquentQuery($orderBy, $orderByDir, $searchValue);
$data = $query->paginate($length);
return new DataTableCollectionResource($data);
}
}