服务器之家

服务器之家 > 正文

laravel yajra插件 datatable的使用详解

时间:2021-11-03 15:43     来源/作者:sileaf

安装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的使用详解的文章就介绍到这了,更多相关laravel yajra插件 datatable使用内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/weixin_53889778/article/details/112513252

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部