laravel yajra插件 datatable的使用详解
吾爱主题
阅读：131
2021-11-03 15:43:00
评论：0
安装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使用内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/weixin_53889778/article/details/112513252
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
