如何在Yajrabox中添加显示数据按钮
YajraBox 是一个基于 Laravel 的数据表格封装库，它提供了丰富的功能来简化数据表格的创建和管理。要在 YajraBox 中添加一个显示数据的按钮，你可以按照以下步骤进行操作：
1. 安装 YajraBox
首先，确保你已经安装了 YajraBox。如果还没有安装，可以通过 Composer 进行安装：
composer require yajra/laravel-datatables-oracle2. 创建数据表格
在你的 Laravel 项目中，创建一个数据表格类。例如，创建一个 UsersDataTable 类：
namespace App\DataTables;
use App\Models\User;
use Yajra\DataTables\Html\Builder;
use Yajra\DataTables\DataTables;
class UsersDataTable
{
public function html()
{
return $this->builder()
->addColumn(['data' => 'id', 'name' => 'id', 'title' => 'ID'])
->addColumn(['data' => 'name', 'name' => 'name', 'title' => 'Name'])
->addColumn(['data' => 'email', 'name' => 'email', 'title' => 'Email'])
->addAction(['width' => '80px'])
->parameters([
'dom' => 'Bfrtip',
'buttons' => ['excel', 'pdf', 'print'],
]);
}
public function ajax()
{
return DataTables::of(User::query())
->addColumn('action', 'path.to.your.action.view')
->make(true);
}
}3. 添加显示数据按钮
在上面的 UsersDataTable 类中，我们已经添加了一个 addAction 方法来添加一个操作列。接下来，我们需要在控制器中使用这个数据表格类，并在视图中渲染它。
控制器
在你的控制器中，使用 UsersDataTable 类来处理数据表格请求：
namespace App\Http\Controllers;
use App\DataTables\UsersDataTable;
use Illuminate\Http\Request;
class UsersController extends Controller
{
public function index(UsersDataTable $dataTable)
{
return $dataTable->render('users.index');
}
}视图
在你的视图文件（例如 resources/views/users/index.blade.php）中，渲染数据表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Users</title>
@yield('styles')
</head>
<body>
<div class="container">
<table id="users-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
@yield('scripts')
</body>
</html>在视图的 head 部分添加 YajraBox 的样式：
@yield('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/buttons.dataTables.min.css') }}">
@endsection在视图的底部添加 YajraBox 的脚本：
@yield('scripts')
<script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('users.index') !!}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'action', name: 'action', orderable: false, searchable: false }
]
});
});
</script>
@endsection4. 创建操作视图
创建一个操作视图文件（例如 resources/views/users/actions.blade.php），用于显示操作按钮：
@can('view', $user)
<a href="{{ route('users.show', $user->id) }}" class="btn btn-primary btn-sm">View</a>
@endcan
@can('edit', $user)
<a href="{{ route('users.edit', $user->id) }}" class="btn btn-warning btn-sm">Edit</a>
@endcan
@can('delete', $user)
<form action="{{ route('users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
@endcan5. 更新控制器以传递数据
在你的 UsersController 中，更新 index 方法以传递用户数据到操作视图：
public function index(UsersDataTable $dataTable)
{
return $dataTable->render('users.index', ['users' => User::all()]);
}相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
