laravel yajra插件 datatable的使用详解

站长资源 2024/11/29 佚名

2 0 1

安装laravel框架

命令行cd进入指定目录下，执行

composer create-project --prefer-dist laravel/laravel datatable

在指定目录下创建最新的laravel项目框架

安装yajra插件

命令行cd进入项目根目录下，执行

composer require yajra/laravel-datatables-oracle

安装yajra datatables软件包

发布yajra datatables软件包

打开config/app.php文件，修改providers和aliases配置

'providers' => [
 ....
 Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
 ....
 'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

view的创建

<!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" 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="/UploadFiles/2021-04-02/jquery-3.5.1.min.js">

创建控制器
cmd执行


php artisan make:controller DatatableController 


设定路由并编辑控制器


//web.php文件
Route::get('/datatable',[App\Http\Controllers\DatatableController::class,'index']);
Route::get('/datatable',[App\Http\Controllers\DatatableController::class,'getData'])->name('getData');

//控制器
<"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);
  }
}


效果图