Skip to content
This repository has been archived by the owner on Apr 30, 2024. It is now read-only.

jamesdordoy/Laravel-Vue-Datatable_Laravel-Package

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Laravel Vue Datatable

A Vue.js Datatable Component for Laravel that works with Bootstrap.

Requirements

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.

Demo

See https://jamesdordoy.github.io/laravel-vue-datatable/

Table of Contents

Example

Image description

Package Installation

$ composer require jamesdordoy/laravelvuedatatable

Add Service Provider

JamesDordoy\LaravelVueDatatable\Providers\LaravelVueDatatableServiceProvider::class,

Publish the Config

$ php artisan vendor:publish --provider="JamesDordoy\LaravelVueDatatable\Providers\LaravelVueDatatableServiceProvider"

Package Options

[
    'models' => [
        "alias" => "as",
        "search_term" => "searchable",
        "order_term" => "orderable",
    ],
    "default_order_by" => "id"
]

Use the Trait

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,
        ]
    ];
}

Use the Controller Resource

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

Component Installation

See https://github.com/jamesdordoy/vue-datatable