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,
]

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使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-01-13

推荐几款用 Sublime Text 开发 Laravel 所用到的插件

我目前主要使用 Sublime Text 2 做 Laravel 开发,主要插件如下: 1.Blade Snippets:提供 Blade 模板自动补全 2.Laravel 4 Blade Highlighter:提供 Blade 关键字高亮 3.Laravel Generator:提供超高效率 Laravel 工作流 这就是之前教程里面说过的way/generators 的 Composer 包的另一个版本,是运行在编辑器里的.不过还是推荐使用命令行版,因为可以方便地读取历史记录,并加以修改.

在Laravel中使用DataTables插件的方法

DataTables 是一个 jQuery 的表格插件,记录一下在 Laravel 中使用的常用功能和用法,比如 ajax 获取数据,自定义搜索,效果展现,选项说明等等,有一些细节记录下来方便以后查看. Laravel 控制器方法 接受 ajax get 请求,返回数据. dataTables 会自带一些参数过来,需要按照格式返回数据,比如分页等.见 dataTables 官方文档说明. 代码如下: // ajax GET 获取列表数据 public function getList(Reque

PHP框架Laravel插件Pagination实现自定义分页

Laravel 的分页很方便,其实扩展起来也挺容易的,下面就来做个示例,扩展一下 paginate() 和 simplePaginate() 方法,来实现我们自定义分页样式,比如显示 "上一页" 和 "下一页" ,而不是 "<" 和 ">" ,当然扩展的方法掌握了你就可以肆无忌惮的扩展一个你想要的分页了,比如跳转到某一页,分页显示一共多少记录,当前显示的记录范围等等巴拉巴拉的... 5.1和5.2应该是同样的方法,

Laravel框架自定义分页样式操作示例

本文实例讲述了Laravel框架自定义分页样式操作.分享给大家供大家参考,具体如下: 操作步骤如下: (1)  对应public/css/paging.css 文件建立分页样式. (2)  控制器查出分页数据使用 paginate函数进行分页处理.(禁止使用group by处理查询). (3) 对应视图引入分页样式. 例如: paging.css 样式文件代码(复制即可用,实际操作过)如下 #pull_right{ text-align:center; } .pull-right { /*flo

TP5框架实现自定义分页样式的方法示例

本文实例讲述了TP5框架实现自定义分页样式的方法.分享给大家供大家参考,具体如下: 1. 在extend\目录下创建page目录,在page目录下创建Page.php文件,将以下代码放入文件中. <?php namespace page; use think\Paginator; class Page extends Paginator { //首页 protected function home() { if ($this->currentPage() > 1) { return &q

jquery pagination插件实现无刷新分页代码

先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo

laravel自定义分页效果

对于laravel分页,自带一个paginate的方法,很好用,但是也是有局限性的. 所以自己针对于此写了一个自己的分页,具体代码如下 <?php namespace ...; use ...; /** * 自定义分页类,适合少数据的查询,多数据的时候不推荐 * Class CustomPaginate * @package App\Tools\Paginate */ class CustomPaginate { /** * 自定义数组分页 * @param $data = 返回结果 * @pa

jquery分页插件pagination使用教程

pagination使用起来非常的方便. 第一步:引入分页需要的js(jquery.pagination.js)和css(pagination.css) pagination插件下载地址 第二步:将分页条容器写到页面里(固定代码) <div class="pages"> <div id="Pagination"></div> <div class="searchPage" id="searchP

laravel自定义分页的实现案例offset()和limit()

情景:因个人使用layui在开发后台模块,因为layui自带了table模块,是都封装了分页的,并且返回数据格式也是有固定要求的 所以我们就不能去使用laravel的快速分页paginate去分页了, 只能使用offset()和limit()一起使用去实现自定义分页功能 一下为我实现的代码 $pagenNum=request('page'); $limit=request('limit'); $count=Admin::count(); $page=$pagenNum-1; if ($page

浅谈Mybatis分页插件,自定义分页的坑

场景:PageHelper 的默认分页方案是 select count(0) from (你的sql) table_count 由于查询数据比较大时,导致分页查询效率低下. 优化:使用自定义的count查询.. 废话不多说,对应代码如下: 这个时候会使用自定义的 count sql进行统计查询. 然后一般分页默认使用 PageHelper.startPage(); 作者优化:如果获取的数量大于实际数量,则进行pageNum优化. 所以 最好建议重载 startPage. 不进行优化!!! 要不然

Laravel5.5 手动分页和自定义分页样式的简单实现

基于Laravel5.5 在项目实施过程中,需要对从接口中获取的数据(或者通过搜索工具查询出来的数据)进行分页 一.创建手动分页 在laravel自带的分页中,一般是通过数据库查询访问paginate()方法来达到分页的效果 ,like this: class IndexControllerextends Controller { publicfunctionindex() { $person = DB::table('person')->paginate(15); return view('i

Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页示例

本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能. 本博客是基于一款正在开发中的github开源项目的,项目代码地址:https://github.com/u014427391/jeeplatform 欢迎star(收藏)或者可以下载去学习,还在开发- 介绍一下Spring Data框架 spring Data : Spring 的一个子项目.用于简化数据库访问,支持NoSQL 和 关系数据存储. 下面给出SpringData 项目所支