Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > laravel yajra插件 datatable的使用详解
Blogger Information
Blog 30
fans 1
comment 0
visits 23349
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
laravel yajra插件 datatable的使用详解
P粉896289085
Original
602 people have browsed it

这篇文章主要介绍了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的使用详解的文章就介绍到这了。

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post