laravel yajra插件 datatable的使用详解

作者:sileaf 时间:2023-11-18 20:05:06 

安装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?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执行


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');

//控制器
<?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的使用详解

来源:https://blog.csdn.net/weixin_53889778/article/details/112513252

标签:laravel,yajra,插件,datatable
0
投稿

猜你喜欢

  • MySQL中导出用户权限设置的脚本分享

    2024-01-21 15:29:04
  • Flask框架利用Echarts实现绘制图形

    2023-01-08 11:52:42
  • pandas 使用apply同时处理两列数据的方法

    2021-09-27 07:35:30
  • MySQL全局锁和表锁的深入理解

    2024-01-24 00:48:53
  • Python 统计数据集标签的类别及数目操作

    2023-04-08 12:04:09
  • python3.7添加dlib模块的方法

    2023-09-16 03:58:55
  • Django处理多用户类型的方法介绍

    2022-11-30 10:16:54
  • python虚拟环境完美部署教程

    2021-09-10 17:54:02
  • python文件和目录操作方法大全(含实例)

    2021-11-11 14:10:29
  • Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法

    2022-03-10 21:04:56
  • Python如何实现大型数组运算(使用NumPy)

    2023-05-11 21:49:05
  • python 函数进阶之闭包函数

    2021-07-21 03:21:29
  • MySQL into_Mysql中replace与replace into用法案例详解

    2024-01-26 20:10:00
  • 学会python自动收发邮件 代替你问候女友

    2023-07-08 17:01:49
  • python输出电脑上所有的串口名的方法

    2022-06-23 20:56:03
  • JS实现六边形3D拖拽翻转效果的方法

    2023-08-28 15:51:31
  • 树莓派(python)与arduino串口通信的详细步骤

    2022-05-29 15:31:06
  • Python爬取百度翻译实现中英互译功能

    2023-04-29 08:32:26
  • Python WXPY实现微信监控报警功能的代码

    2021-05-15 02:07:20
  • Vue项目中props传值时子组件检测不到的问题及解决

    2024-06-05 15:31:36
  • asp之家 网络编程 m.aspxhome.com