Yajra数据表格：巧妙呈现数据，提升Laravel应用体验

## Yajra数据表格：在Laravel中巧妙展现数据

引言

Yajra数据表格是一个强大的JavaScript库，专为以美观、易于阅读的方式呈现大量数据而设计。在本文中，我们将探讨如何将Yajra数据表格集成到Laravel 7应用程序中，从而提升用户体验，并简化数据处理。

安装与集成

1. 安装数据表格包

通过Composer安装数据表格包：

composer require yajra/laravel-datatables-oracle "^9.0"

2. 注册数据表格服务提供者

在config/app.php文件中，向providers数组添加以下行：

Yajra\DataTables\DataTablesServiceProvider::class,

数据模型

创建一个代表数据库表的模型。例如，Product模型：

class Product extends Model
{
    protected $fillable = ['name', 'price', 'description'];
}

控制器与视图

1. 控制器（ProductController）

class ProductController extends Controller
{
    public function index()
    {
        return view('products.index');
    }

    public function data()
    {
        $products = Product::all();

        return DataTables::of($products)->make(true);
    }
}

2. 视图（products.index.blade.php）

@extends('layouts.app')

@section('content')
    <div class="card">
        <table id="product-table" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Description</th>
                </tr>
            </thead>
        </table>
    </div>
@endsection

@push('scripts')
    <script>
        $('#product-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('products.data') }}",
            columns: [
                { data: 'name', name: 'name' },
                { data: 'price', name: 'price' },
                { data: 'description', name: 'description' }
            ]
        });
    </script>
@endpush

初始化数据表格

在resources/js/app.js文件中，初始化数据表格：

import $ from 'jquery';
import 'datatables.net-dt/js/dataTables.dataTables';
import 'datatables.net-dt/css/jquery.dataTables.min.css';

$(document).ready(function() {
    $('#product-table').DataTable();
});

自定义数据

您可以自定义数据表格以显示来自其他数据源或模型关系的数据。例如，显示与每个产品关联的订单数：

->addColumn('order_count', function($product) {
    return $product->orders->count();
})

结论

Yajra数据表格是一个易于使用的工具，可为Laravel应用程序创建交互式、用户友好的数据表格。通过其直观的API和强大的自定义功能，您可以轻松地呈现复杂数据并优化用户体验。

常见问题解答

1. 如何在数据表格中添加搜索功能？

在视图文件中，使用@push('scripts')块添加以下代码：

@push('scripts')
    <script>
        $('#product-table').DataTable({
            // 搜索选项
            searching: true
        });
    </script>
@endpush

2. 如何在数据表格中添加分页？

在make(true)方法的第二个参数中指定分页长度：

return DataTables::of($products)->make(true, 10); // 每页显示10条记录

3. 如何对数据表格中的列进行排序？

在控制器中，在make(true)方法的第一个参数中指定可排序的列：

return DataTables::of($products)->make(true, ['name', 'price']);

4. 如何在数据表格中添加按钮或链接？

在addColumn方法中，您可以返回HTML代码来创建按钮或链接：

->addColumn('action', function($product) {
    return '<a href="'.route('products.edit', $product->id).'" class="btn btn-primary btn-sm">Edit</a>';
})

5. 如何在数据表格中使用自定义CSS类？

在视图文件中，使用@push('styles')块添加以下代码：

@push('styles')
    <style>
        #product-table tr:hover {
            background-color: #eee;
        }
    </style>
@endpush