当前位置: 萬仟网 > IT编程>开发语言>.net > laravel yajra插件 datatable的使用详解

laravel yajra插件 datatable的使用详解

2021年01月13日  | 萬仟网IT编程  | 我要评论
安装laravel框架命令行cd进入指定目录下,执行composer create-project --prefer-dist laravel/laravel 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,
]

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com