laravel 使用datatables dome

 作者:Blue

 上传时间:2017-07-06

 标签: Laravel 扩展包 代码片段

datatables的简介我就不多说了,大家百度一下就知道了,下面是我自己倒腾的一个结合laravel使用的一个实例。

环境:laravel5.2

实现功能:

  • datatables的基本显示,查询,排序。
  • 连表查询。

如何使用

在app下新建一个common文件夹,然后再common下新建一个Datatable.php文件,放入下图代码

<?php

namespace App\Common;
/**
 * Created by PhpStorm.
 * User: Blue
 * Date: 2017/3/1
 * Time: 8:39
 */
class Datatable
{
    /**
     *
     * @param   string      $template       [cambiamos la plantilla por defecto por otra a nuestro gusto]
     * @param   string      $dt_id          [el id de la tabla que se convertira en datatable]
     * @param   Collection  $values         [representa la colección de valores que se han de incorporar a la tabla]
     * @param   array       $array_values   [array que contiene los atributos a mostrar]
     * @param   array       $array_relations   [array que contiene los relations a mostrar]
     * @param   array       $array_columnas   [array que contiene los columnas a mostrar]
     * @param   string      $route          [ruta del controlador al que saltar]
     * @param   string      $link           [dirección a la que saltar en el primer parámetro, por defecto 'edit']
     * @param   boolean     $search         [true = se muestran inputs de busqueda en cada columna (pierde traducción)]
     * @return vista HTML
     */
    public function datatable($dt_id, $values, $array_values, $array_relations, $array_columnas, $link = '', $route = NULL , $search = false , $template = 'myVendor.datatable.datatable')
    {
        $view = \View::make($template, [
            'values' => $values,
            'datatable_id' => $dt_id,
            'array_values' => $array_values,
            'array_relations' => $array_relations,
            'array_columnas' => $array_columnas,
            'route' => $route,
            'link' => $link,
            'search' => $search,
            'template' => $template
        ]);
        $contents = $view->render();
        return $contents;
    }

    /**
     *  jQuery  datatables.
     *
     * @param   string      $dt_id          [el id de la tabla que se convertira en datatable]
     * @param   boolean     $search         [true = se muestran inputs de busqueda en cada columna (pierde traducción)]
     * @return vista HTML
     */
    public function script($dt_id, $search = false)
    {
        $view = \View::make('myVendor.datatable.script', ['datatable_id' => $dt_id, 'search' => $search]);
        $contents = $view->render();
        return  $contents;
    }
}

在resource的view文件夹下创建一个MyVendor文件夹,然后再其下创建一个datatable文件夹,最后创建一个datatable.blade.php文件,并保存如下代码。

<table id="{{ $datatable_id }}" class="table table-striped table-bordered " cellspacing="0">
    <thead>
    <tr>
        @for ($i = 0; $i < count($array_columnas); $i++)
            <th>{!! $array_columnas[$i] !!}</th>
        @endfor
    </tr>
    </thead>
    <tbody>
    @foreach ($values as $value)
        <tr>
            @for ($i = 0; $i < count($array_values); $i++)
                @if($value->relationLoaded($array_values[$i])==true)
                    <td>{!! $value->getRelation($array_values[$i])->getAttribute($array_relations[$i]) !!}</td>
                    @else
                        <td>{!! $value->getAttribute($array_values[$i]) !!}</td>
                @endif
            @endfor
            @if($link)
                <td>

                    <a class="glyphicon glyphicon-edit btn btn-md" href="{{url($link.'/edit/'.$value->id)}}" title="修改"></a>
                    <a class="glyphicon glyphicon-trash btn btn-md" href="{{url($link.'/destroy/'.$value->id)}}" title="删除"></a>
                </td>
                @endif
        </tr>
    @endforeach
    </tbody>
    <tfoot>
    <tr>
        @for ($i = 0; $i < count($array_columnas); $i++)
            <th>{!! $array_columnas[$i] !!}</th>
        @endfor
    </tr>
    </tfoot>
</table>

新建一个script.blade.php文件,放入一下代码。(改代码用于初始化datatables,有时候后台主题自带可以不使用)。

<script type="text/javascript">
    $(function() {
        window.table_id = '#' + '{{ $datatable_id }}';
        window.table = $(table_id).DataTable({
            @if (!$search)
            language: {
                url: "/js/Chinese.json"
            }
            @endif
        });
        @if ($search)
            window.table_h = $(table_id + ' thead th');
        window.table_f = $(table_id + ' tfoot th');
        @endif
    });
</script>

新建一个UserController文件,写入如下代码。

<?php

namespace App\Http\Controllers\admin;

use App\User;
use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Common\Datatable;


class UserController extends Controller
{
    /**
     * /*author: Blue
     * index
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function index(){
        $datas=User::all();
        $datatable = (
        new DataTable)->datatable(
                'data-table',
                $datas,
                ['id', 'name','email'],
                [],
                ['#','用户名','邮箱'],
                null,
                false
            );
        $script = (new DataTable)->script('data-table', false);
        return view('admin.article.index', ['datatable' => $datatable, 'script' => $script]);
    }

}

在视图文件中输出。

{!! $datatable !!}
{!! $script !!}

效果图:
laravel 5 datatables dome

注:连表查询使用dome就不演示了,贴代码相信大家能理解。新建一个标间关系,此处为“articleCategory”,调用的是category表中的name列。觉得不好勿喷,水平有限。

$articles=Article::with('articleCategory')->get();
    $datatable = (
        new DataTable)->datatable(
        'data-table',
        $articles,
        ['id', 'articleCategory','title', 'keys', 'tag_id', 'flag','clicks', 'write', 'photo', 'intro'],
        ['id', 'name','title', 'keys', 'tag_id', 'flag','clicks', 'write', 'photo', 'intro'],
        ['#','分类','标题','关键词','标签','Flag','点击数','作者','缩略图','简述','操作'],
        'admin/article',
        false
    );
    $script = (new DataTable)->script('data-table', false);
    return view('admin.article.index', ['datatable' => $datatable, 'script' => $script]);

欢迎支付宝打赏


   常用下载
  • wkhtmltox 一款将html转换成pdf的软件,laravel有相关支持包  
  • linux一键环境OneinStack(支持lnmp,lamp)