主页 > 知识库 > laravel yajra插件 datatable的使用详解

laravel yajra插件 datatable的使用详解

热门标签:衡水外呼系统平台 新河科技智能外呼系统怎么样 百度商铺地图标注 安装电销外呼系统 福州人工外呼系统哪家强 钉钉打卡地图标注 注册400电话申请 常州地图标注服务商 地图标注平台怎么给钱注册

安装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;700display=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的使用详解的文章就介绍到这了,更多相关laravel yajra插件 datatable使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • 在Laravel中使用DataTables插件的方法
  • PHP框架Laravel插件Pagination实现自定义分页
  • 推荐几款用 Sublime Text 开发 Laravel 所用到的插件

标签:辽阳 六安 白城 柳州 克拉玛依 唐山 鹰潭 鹤岗

巨人网络通讯声明:本文标题《laravel yajra插件 datatable的使用详解》,本文关键词  laravel,yajra,插件,datatable,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《laravel yajra插件 datatable的使用详解》相关的同类信息!
  • 本页收集关于laravel yajra插件 datatable的使用详解的相关信息资讯供网民参考!
  • 推荐文章