Блог

Главная - Вопросы по программированию - Как добавить столбцы действий в yajra datatables laravel

Как добавить столбцы действий в yajra datatables laravel

#laravel #eloquent #datatables #laravel-6 #yajra-datatable

#laravel #красноречивый #таблицы данных #laravel-6 #yajra-datatable

Вопрос:

я застрял, добавляя действия столбцов для кнопки редактирования и удаления с помощью yajra datatables, я использую службу DataTables, потому что я тоже хочу добавить кнопку экспорта, вот мой код my datatables :

 public function dataTable($query)
{
    return datatables()
        ->eloquent($query);
}

/**
 * Get query source of dataTable.
 *
 * @param AppInfoDataTable $model
 * @return IlluminateDatabaseEloquentBuilder
 */
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 YajraDataTablesHtmlBuilder
 */


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

мой текущий вид выглядит так

есть предложения? извините за мой ломаный английский, перепробовал много учебников, но не могу найти правильный

Комментарии:

1. yajrabox.com/docs/laravel-datatables/master/add-column вы пробовали это делать?

2. я запутался в документации, куда я должен поместить этот код? мои маршруты? мой контроллер или мой код таблиц данных?

3. @AnggietBracmatya, вы используете html builder, если вы использовали не html Builder для таблиц данных yajra, я могу вам помочь

4. проблема в том, что я использую html Builder, потому что кнопка экспорта, любое решение для меня? спасибо за ответ.

Ответ №1:

Столбец действий используется по умолчанию для таблиц данных 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 AppModelsCachthuclamviec $model
     * @return IlluminateDatabaseEloquentBuilder
     */
    public function query(Cachthuclamviec $model)
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return YajraDataTablesHtmlBuilder
     */
    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ấtamp;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:
datatables_actions

Код может иметь различия из-за Boostrap, jQuery, … версии