如何在 yajra 数据表 laravel 中添加操作列

Posted 2023-02-16

【中文标题】如何在 yajra 数据表 laravel 中添加操作列

【英文标题】：How to add action columns in yajra datatables laravel

【发布时间】：2021-01-13 14:15:17

【问题描述】：

我坚持使用 yajra 数据表添加用于编辑和删除按钮的列操作，我使用 DataTables 服务，因为我也想添加导出按钮，这是我的数据表代码：

public function dataTable($query)

    return datatables()
        ->eloquent($query);


/**
 * Get query source of dataTable.
 *
 * @param \App\InfoDataTable $model
 * @return \Illuminate\Database\Eloquent\Builder
 */
public function query(InfoDataTable $model)

    // return $model->newQuery();
    $data = DataInfo::select('data-info.*');
    return $this->applyScopes($data);


/**
 * Optional method if you want to use html builder.
 *
 * @return \Yajra\DataTables\Html\Builder
 */


public function html()

  return $this->builder()
             ->columns($this->getColumns())
             ->addAction()
             ->parameters([
                 'dom' => 'Bfrtip',
                 'buttons' => ['csv', 'excel', 'print'],
             ]);


/**
 * Get columns.
 *
 * @return array
 */
protected function getColumns()

    return [
        Column::make('employee_no'),
        Column::make('name'),
        Column::make('address'),
        Column::make('birthplace'),
        Column::make('birthdate'),
        Column::make('age'),
        Column::make('occupation'),
        Column::make('status'),
        Column::make('gender'),
        Column::make('startdate'),
    ];

这是我的控制器中用于渲染表格的代码

public function index(InfoDataTable $dataTable)

          $User = User::where('id', Auth::id())->first();
          if($User->role == 'superadmin')
          return $dataTable->render('superadmin.index');
             else 
              return $dataTable->render('admin.index');
            
 

我的刀片看起来像这样

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
            <div class="card">
                <div class="card-header">Dashboard</div>
                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                             session('status') 
                        </div>
                    @endif
                </div>
            <div class="card-body">
              <div class="table-responsive">
                <div class="panel panel-default">
                (!! $dataTable->table() !!)
              </div>
            </div>
            </div>
          </div>
        </div>
</div>
@stop
@push('scripts')
  !! $dataTable->scripts() !!
@endpush

my current view looks like this

有什么建议吗？抱歉我的英语不好，尝试了很多教程但找不到正确的教程

【问题讨论】：

yajrabox.com/docs/laravel-datatables/master/add-column你试过这个吗？

我对文档感到困惑，我应该把这些代码放在哪里？我的路线？我的控制器或我的数据表代码？

@AnggietBracmatya，您正在使用 html 构建器，如果您对 yajra 数据表使用了非 html 构建器，那么我可以帮助您

问题是我使用 html builder 因为导出按钮，有什么解决方案吗？感谢您的回复。

【参考方案1】：

Actions 列是 yajra 数据表的默认值。所以我找到了如何删除它：https://yajrabox.com/docs/laravel-datatables/6.0/remove-column（我从未尝试过）

public function dataTable($query)

    return datatables()
        ->eloquent($query)
        ->removeColumn('action');

如果您想编辑操作列，请尝试我的代码：

public function dataTable($query)

    $dataTable = new EloquentDataTable($query);

    return $dataTable->addColumn('action', 'folderNameInViewfolder.datatables_actions');

这就是datatables_actions中的内容（全名：datatables_actions.blade.php）

!! Form::open(['route' => ['routename.destroy', $id], 'method' => 'delete']) !!
<div class='btn-group'>
    <a href=" route('routename.show', $id) " class='btn btn-default btn-xs'>
        <i class="glyphicon glyphicon-eye-open"></i>
    </a>
    <a href=" route('routename.edit', $id) " class='btn btn-default btn-xs'>
        <i class="glyphicon glyphicon-edit"></i>
    </a>
    !! Form::button('<i class="glyphicon glyphicon-trash"></i>', [
        'type' => 'submit',
        'class' => 'btn btn-danger btn-xs',
        'onclick' => "return confirm('Are you sure?')"
    ]) !!
</div>
!! Form::close() !!

我的代码和你的不一样，所以我会展示我的代码：

数据表代码：

public function dataTable($query)
    
        $dataTable = new EloquentDataTable($query);

        return $dataTable->addColumn('action', 'cachthuclamviecs.datatables_actions');
    

    /**
     * Get query source of dataTable.
     *
     * @param \App\Models\Cachthuclamviec $model
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query(Cachthuclamviec $model)
    
        return $model->newQuery();
    

    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */
    public function html()
    
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->addAction(['width' => '120px', 'printable' => false])
            ->parameters([
                'dom'       => 'Bfrtip',
                'stateSave' => true,
                'order'     => [[0, 'desc']],
                'buttons'   => [
                    ['extend' => 'create', 'className' => 'btn btn-default btn-sm no-corner', 'text' => '<span><i class="fa fa-plus"></i> Thêm</span>'],
                    ['extend' => 'export', 'className' => 'btn btn-default btn-sm no-corner', 'text' => '<span><i class="fa fa-download"></i> Xuất&nbsp;<span class="caret"></span></span>'],
                    ['extend' => 'print', 'className' => 'btn btn-default btn-sm no-corner', 'text' => '<span><i class="fa fa-print"></i> In</span>'],
                    ['extend' => 'reset', 'className' => 'btn btn-default btn-sm no-corner', 'text' => '<span><i class="fa fa-undo"></i> Cài lại</span>'],
                    ['extend' => 'reload', 'className' => 'btn btn-default btn-sm no-corner', 'text' => '<span><i class="fa fa-refresh"></i> Tải lại</span>'],
                ],
            ]);
    

    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    
        return [
            'cachthuclamviec'
        ];
    

控制器代码：

public function index(CachthuclamviecDataTable $cachthuclamviecDataTable)

    return $cachthuclamviecDataTable->render('cachthuclamviecs.index');

刀片代码：

@section('css')
    @include('layouts.datatables_css')
@endsection

!! $dataTable->table(['width' => '100%', 'class' => 'table table-striped table-bordered']) !!

@push('scripts')
    @include('layouts.datatables_js')
    !! $dataTable->scripts() !!
@endpush

datatables_actions 刀片代码：

!! Form::open(['route' => ['cachthuclamviecs.destroy', $id], 'method' => 'delete']) !!
<div class='btn-group'>
    <a href=" route('cachthuclamviecs.show', $id) " class='btn btn-default btn-xs'>
        <i class="glyphicon glyphicon-eye-open"></i>
    </a>
    <a href=" route('cachthuclamviecs.edit', $id) " class='btn btn-default btn-xs'>
        <i class="glyphicon glyphicon-edit"></i>
    </a>
    !! Form::button('<i class="glyphicon glyphicon-trash"></i>', [
        'type' => 'submit',
        'class' => 'btn btn-danger btn-xs',
        'onclick' => "return confirm('Are you sure?')"
    ]) !!
</div>
!! Form::close() !!

把文件datatables_actions放在这里：datatables_actions:

代码可能因 Boostrap、jQuery、...版本而有所不同