安装laravel框架
命令行cd进入指定目录下，执行
?
|
1
|
composer create-project --prefer-dist laravel/laravel datatable
|
在指定目录下创建最新的laravel项目框架
安装yajra插件
命令行cd进入项目根目录下，执行
?
|
1
|
composer require yajra/laravel-datatables-oracle
|
安装yajra datatables软件包
发布yajra datatables软件包
打开config/app.php文件，修改providers和aliases配置
?
|
1
2
3
4
5
6
7
8
|
'providers' => [
....
Yajra\\DataTables\\DataTablesServiceProvider::class,
]
'aliases' => [
....
'DataTables' => Yajra\\DataTables\\Facades\\DataTables::class,
]
|
view的创建
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel-datatable</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="external nofollow" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css" rel="external nofollow" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.js"></script>
<style>
body {
font-family: 'Nunito';
}
</style>
</head>
<body class="antialiased">
{{\\Carbon\\Carbon::now()}}
<table id="example">
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>生日</th>
<th>性别</th>
<th>工作</th>
<th>电话</th>
<th>邮箱</th>
<th>地址</th>
</tr>
</thead>
</table>
</body>
<script>
$(document).ready(function (){
let datatable = $('#example').DataTable({
searching:false,
paging:false,
ajax:{
url:"{{route('getData')}}",
},
columns:[
{
data:"id",
name:"id",
},
{
data:"name",
name:"name",
},
{
data:"birthday",
name:"birthday",
},
{
data:"sex",
name:"sex",
},
{
data:"job",
name:"job",
},
{
data:"tel",
name:"tel",
},
{
data:"email",
name:"email",
},
{
data:"address",
name:"address",
},
],
});
});
</script>
</html>
|
创建控制器
cmd执行
?
|
1
|
php artisan make:controller DatatableController
|
设定路由并编辑控制器
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//web.php文件
Route::get('/datatable',[App\\Http\\Controllers\\DatatableController::class,'index']);
Route::get('/datatable',[App\\Http\\Controllers\\DatatableController::class,'getData'])->name('getData');
//控制器
<?php
namespace App\\Http\\Controllers;
use Illuminate\\Http\\Request;
use Illuminate\\Support\\Facades\\DB;
class DatatableController extends Controller
{
public function index(){
return view('welcome');
}
public function getData(){
$datas = DB::table('user')->select('*')->get();
return datatables()->of($datas)
->editColumn('id', '<input type="hidden" value="{{$id}}"><input type="checkbox" name="select">')->editColumn('name', '{{$name}}')
->editColumn('birthday', '{{$birthday}}')->editColumn('sex', '{{$sex}}')
->editColumn('job', '{{$job}}')->editColumn('tel', '{{$tel}}')
->editColumn('email', '{{$email}}')->editColumn('address', '{{$address}}')
->escapeColumns([])->make(true);
}
}
|
效果图
到此这篇关于laravel yajra插件 datatable的使用详解的文章就介绍到这了,更多相关laravel yajra插件 datatable使用内容请搜索快网idc以前的文章或继续浏览下面的相关文章希望大家以后多多支持快网idc！
原文链接：https://blog.csdn.net/weixin_53889778/article/details/112513252
相关文章
猜你喜欢
- ASP.NET本地开发时常见的配置错误及解决方法？ 2025-06-10
- ASP.NET自助建站系统的数据库备份与恢复操作指南 2025-06-10
- 个人网站服务器域名解析设置指南：从购买到绑定全流程 2025-06-10
- 个人网站搭建：如何挑选具有弹性扩展能力的服务器？ 2025-06-10
- 个人服务器网站搭建：如何选择适合自己的建站程序或框架？ 2025-06-10
