README

• 在 Patreon 上成为赞助者.
• 通过加密货币进行一次性捐赠.

介绍

如果你想要轻松快速地创建具有疯狂特性的 DataTable，这个包就是为你准备的。

这两个 Laravel 包旨在轻松快速地创建 DataTable，具有以下功能：

• 搜索
• 排序
• 添加新关系
• 支持 astrotomic/laravel-translatable 包：无缝集成以支持多语言。
• 多选
• 删除/删除全部
• 重构数据
• 权限访问
• 事件响应通知
• 分页

目标是使用 Ajax 以简单的方式创建 DataTable，具有有趣的功能，只需几个步骤，你就可以创建它。

官方文档

Laravel Vue DataTable 文档可在此处找到 这里

演示

DataTable 演示

快速示例

开始创建 Grid 类

// app/DataGrid/PostGrid.php

namespace App\\DataGrid;

use Yazan\DataTable\Mysql\Eloquent\Eloquent;

class PostGrid
{
	use Eloquent;

    public $model = "App\\Models\\Post";

}

从 PostGrid 类创建实例并返回集合

// app/Http/Controller/PostController.php

public function all(Request $request)
{
  $posts = (new PostGrid())->render();

  return ['success' => true, 'collection' => $posts];

}

在 blade 中使用 data-table 组件

// resources/posts/index.blade.php
   <data-table
       :config="{
       url: `/posts/all?page=1`,
           },
       }":columns="[
       {
       label: 'ID',
       column: 'id',
       show: true,
           sort:{
             sortable: false,
             sortColumn: 'id',
           },
      },
       {
       label: 'Title',
       column: 'title',
        show: true,
           sort:{
            sortable: true,
            sortColumn: 'title',
            sortDir: 'asc',
           },
      },
      {
       label: 'CreatedAt',
       column: 'created_at',
       show: true,
            sort:{
               sortable: true,
               sortColumn: 'created_at',
               sortDir: 'asc',
            },
      },
      {
       label: 'UpdatedAt',
       column: 'updated_at',
       show: true,
            sort:{
               sortable: true,
               sortColumn: 'updated_at',
               sortDir: 'asc',
            },
      },
       ]
       "></data-table>