README

一个用于Laravel的Vue.js表格组件，与Bootstrap兼容。

要求

Vue.js 2.x
Laravel 5.x
Bootstrap 4（可选）

此包使用了可选的默认组件，即由 gilbitron 创建的 Laravel Vue Pagination 组件。如果您需要其他区域的网站中的分页组件，并且使用Laravel API和Bootstrap，我强烈建议使用这个灵活的组件。

演示

请查看 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"
]

使用特性

此特性是可选的，它简单地提供了一个基于在模型中设置的 $dataTableColumns 属性的基本方法来过滤数据。如果您想对数据的过滤有更多控制，请随意省略此特性并使用您自己的过滤方法。只需记住分页结果！

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

使用控制器资源

集合资源期望一个分页集合，所以如果您需要更复杂的过滤，可以自由地使用您自己的查询并省略提供的查询。

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

组件安装

请查看 https://github.com/jamesdordoy/vue-datatable

詹姆斯多伊 / laravelvuedatatable

维护者

详细信息