README

Laravel Simple Datatable 提升了 HTML 表格中数据的可访问性

https://github.com/cuongnd88/lara-simple-datatable

1-使用 Composer 安装 cuongnd88/lara-simple-datatable。

$ composer require cuongnd88/lara-simple-datatable

2-在 config/app.php 中添加以下服务提供者

<?php
// config/app.php
return [
    // ...
    'aliases' => [
        . . . .
        'SimpleDatatable' => Cuongnd88\LaraSimpleDatatable\Facades\SimpleDatatableFacade::class,
    ],
    // ...
];

您可以通过将组件复制到本地配置目录来修改 Simple Datatable 接口

php artisan vendor:publish --provider="Cuongnd88\LaraSimpleDatatable\LaraSimpleDatatableServiceProvider"

示例用法

让我们从Laravel Simple Datatable 开始编写更少的代码

....
use SimpleDatatable;

class UserController extends Controller
{
    public function index(Request $request)
    {
        $users = SimpleDatatable::buildQuery(User::query())
                    ->setPerPage(10)
                    ->addIncrement(function($value) {
                        return "#{$value["increment"]}";
                    })
                    ->editColumn('id', function($value) {
                        return "[{$value["id"]}]";
                    })
                    ->editColumn('name', 'user.partials.name')
                    ->addColumn('action', 'user.partials.action')
                    ->make();

        return view('user.index', ['users' => $users]);
    }
}

buildQuery(Builder $query)：设置查询构建。

setPerPage(int $perPage) 用于设置每页的项目数量。

addIncrement($callback) 用于添加增量数字。

editColumn(string $key, $callback|$view) 用于编辑现有列。

addColumn(string $key, $callback|$view) 用于添加更多列。

make() 用于创建简单的数据表。

Simple Datatable 通过使用 @simpleDatatable 和 @simplePaginator 使您的工作更轻松，以渲染视图

index.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Simple Datatable</div>

                <div class="card-body">
                    @simpleDatatable(['data' => $users, 'view' => simple_table_view('users')])
                    @endsimpleDatatable

                    @simplePaginator(['data' => $users, 'appends' => ['name' => 'cuong.ngo']])
                    @endsimplePaginator
                </div>


            </div>
        </div>
    </div>
</div>
@endsection

@simpleDatatable(array $result)：$result 必须有 data 键用于内容，以及 view 键用于设置视图。

@simplePaginator(array $result)：$result 必须有 data 键用于内容，appends 是可选的，用于扩展数据（例如：https://:8080/users?name=cuong.ngo&page=10）。

simple_table_view(string $view)：用于设置从配置文件夹中的 simple-datatable.php 加载的表格标题。

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Default paginator view
    |--------------------------------------------------------------------------
    |
    */
    'paginator_view' => 'components.simple-datatable.default-bootstrap-4',

    /*
    |--------------------------------------------------------------------------
    | Default simple paginator view
    |--------------------------------------------------------------------------
    |
    */
    'simple_paginator_view' => 'components.simple-datatable.default-bootstrap-4',

    /*
    |--------------------------------------------------------------------------
    | Default makeup for simple table view
    |--------------------------------------------------------------------------
    |
    */
    'default_table_makeup' => 'table-striped table-hover',

    /*
    |--------------------------------------------------------------------------
    | Setting views for specified datatable
    |--------------------------------------------------------------------------
    |
    */
    'views' => [
        'users' => [
            'items' => [
                'increment' => '#',
                'id' => 'ID',
                'name' => 'Name',
                'email' => 'Email',
                'action' => '',
            ],
        ],
    ],
];

• 要修改列的视图，您可以创建一个 blade 文件，例如 addColumn('action', 'user.partials.action')

user.partials.action

<a href="user/{{$id}}">Edit</a> | <a href="user/{{$id}}/remove">Remove</a>

• 要修改整个表格的视图，您可以查看 simple-datatable.blade.php

@php
$makeup = $view['makeup'] ?? '';
$keys = array_keys($view['items']);
$headLabels = array_values($view['items']);
@endphp
<table class="table {{$makeup}}">
    <thead>
        <tr>
            @foreach ($headLabels as $label)
                <th scope="col">{{$label}}</th>
            @endforeach
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $item)
            <tr>
                @foreach ($keys as $key)
                    <td>{{ $item[$key] ?? '' }}</td>
                @endforeach
            </tr>
        @endforeach
    </tbody>
</table>