ASCII码 ASCII码

laravel yajra插件 datatable的使用详解

发布于：2022-03-25 09:31:11  栏目：技术文档

这篇文章主要介绍了laravel yajra插件 datatable的使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

安装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, ]

  1. <!DOCTYPE html>
  2. <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Laravel-datatable</title>
  9.     <!-- Fonts -->
  10.     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="external nofollow" rel="stylesheet">
  12.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css" rel="external nofollow" />
  14.     <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  15.     <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.js"></script>
  17.     <style>
  18.       body {
  19.         font-family: 'Nunito';
  20.       }
  21.     </style>
  22.   </head>
  23.   <body class="antialiased">
  24.   {{\Carbon\Carbon::now()}}
  25.   <table id="example">
  26.     <thead>
  27.     <tr>
  28.       <th></th>
  29.       <th>姓名</th>
  30.       <th>生日</th>
  31.       <th>性别</th>
  32.       <th>工作</th>
  33.       <th>电话</th>
  34.       <th>邮箱</th>
  35.       <th>地址</th>
  36.     </tr>
  37.     </thead>
  38.   </table>
  39.   </body>
  40.   <script>
  41.     $(document).ready(function (){
  42.       let datatable = $('#example').DataTable({
  43.         searching:false,
  44.         paging:false,
  45.         ajax:{
  46.           url:"{{route('getData')}}",
  47.         },
  48.         columns:[
  49.           {
  50.             data:"id",
  51.             name:"id",
  52.           },
  53.           {
  54.             data:"name",
  55.             name:"name",
  56.           },
  57.           {
  58.             data:"birthday",
  59.             name:"birthday",
  60.           },
  61.           {
  62.             data:"sex",
  63.             name:"sex",
  64.           },
  65.           {
  66.             data:"job",
  67.             name:"job",
  68.           },
  69.           {
  70.             data:"tel",
  71.             name:"tel",
  72.           },
  73.           {
  74.             data:"email",
  75.             name:"email",
  76.           },
  77.           {
  78.             data:"address",
  79.             name:"address",
  80.           },
  81.         ],
  82.       });
  83.     });
  84.   </script>
  85. </html>

创建控制器

cmd执行

php artisan make:controller DatatableController

设定路由并编辑控制器

  1. //web.php文件
  2. Route::get('/datatable',[App\Http\Controllers\DatatableController::class,'index']);
  3. Route::get('/datatable',[App\Http\Controllers\DatatableController::class,'getData'])->name('getData');
  5. //控制器
  6. <?php
  8. namespace App\Http\Controllers;
  10. use Illuminate\Http\Request;
  11. use Illuminate\Support\Facades\DB;
  13. class DatatableController extends Controller
  14. {
  15.   public function index(){
  16.     return view('welcome');
  17.   }
  19.   public function getData(){
  20.     $datas = DB::table('user')->select('*')->get();
  21.     return datatables()->of($datas)
  22.       ->editColumn('id', '<input type="hidden" value="{{$id}}"><input type="checkbox" name="select">')->editColumn('name', '{{$name}}')
  23.       ->editColumn('birthday', '{{$birthday}}')->editColumn('sex', '{{$sex}}')
  24.       ->editColumn('job', '{{$job}}')->editColumn('tel', '{{$tel}}')
  25.       ->editColumn('email', '{{$email}}')->editColumn('address', '{{$address}}')
  26.       ->escapeColumns([])->make(true);
  27.   }
  28. }

效果图

到此这篇关于laravel yajra插件 datatable的使用详解的文章就介绍到这了。

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行