Laravel - Как настроить Datatable для блейда представления индекса - PullRequest
0 голосов
/ 18 февраля 2020

Я использую Laravel -5,8 для своего веб-приложения. В нем у меня есть бланк представления индекса, созданный с помощью datatable, который получен из этих двух таблиц динамического ввода c:

class AppraisalGoal extends Model
{
    protected $table = 'appraisal_goals';
    protected $primaryKey = 'id';

    protected $fillable = [
                  'goal_type_id',
                  'appraisal_identity_id',
                  'employee_id',
                  'company_id',
                  'is_published',
                  'is_approved',
                  'weighted_score',
                  'employee_comment',
                  'line_manager_comment',
                  'goal_title',
                  'appraisal_doc',
                  'appraisal_start_date',
                  'appraisal_end_date',
              ];

    public function goaltype()
    {
        return $this->belongsTo('App\Models\Appraisal\AppraisalGoalType','goal_type_id');
    }

    public function employee()
    {
        return $this->belongsTo('App\Models\Hr\HrEmployee','employee_id');
    }

    public function appraisalidentity()
    {
        return $this->belongsTo('App\Models\Appraisal\AppraisalIdentity','appraisal_identity_id');
    }

    public function appraisalgoaldetail(){
        return $this->hasMany('App\Models\Appraisal\AppraisalGoalDetail');
    }
}

class AppraisalGoalDetail extends Model
{
    protected $table = 'appraisal_goal_details';
    protected $fillable = [
                  'name',
                  'company_id',
                  'appraisal_goal_id',
                  'kpi_description',
                  'appraisal_doc',
                  'activity',
                  'start_date',
                  'end_date',
              ];

    public function appraisalgoal()
    {
        return $this->belongsTo('App\Models\Appraisal\AppraisalGoal');
    }    
}

Контроллер

public function index()
{
    $userEmployee = Auth::user()->employee_id;
    $goals = AppraisalGoal::where('employee_id', $userEmployee)->get();

    return view('appraisal.appraisal_goals.index')->with('goals', $goals);
}

В настоящее время у меня есть этот индекс лезвие просмотра:

current view blade

, полученное из:

    <div class="card-body">
        <div class="table-responsive">
            <table class=" table table-bordered table-striped table-hover datatable">
                <thead>
                    <tr>
                        <th width="10">
                            #
                        </th>
                        <th>
                            Goal Type
                        </th>
                        <th>
                            Goal Title
                        </th>
                        <th>
                            Goal Description
                        </th>
                        <th>
                            Weight
                        </th>
                        <th>
                            Published
                        </th>
                        <th>
                            Approved
                        </th>
                        <th>
                            Line Manager's Comments
                        </th>  
                        <th>
                            Start Date
                        </th>  
                        <th>
                            End Date
                        </th>
                        <th>
                            Date Added
                        </th>
                        <th>
                            &nbsp;
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($goals as $key => $goal)
                            <td>
                                {{$key+1}}
                            </td>
                            <td>
                                {{$goal->goaltype->name ?? '' }}
                            </td>
                            <td>
                                {{$goal->goal_title ?? '' }}
                            </td>
                            <td>
                                {{$goal->goal_description ?? '' }}
                            </td>
                            <td>
                                {{$goal->weighted_score ?? '' }}
                            </td>
                            <td>
                                @if ($goal->is_published)
                                    <span class="badge bg-success">Published</span>
                                @else
                                    <span class="badge bg-danger">Pending</span>
                                </a>
                                @endif
                            </td>
                            <td>
                                @if ($goal->is_approved)
                                    <span class="badge bg-success" >Approved</span>
                                @else
                                    <span class="badge bg-danger">Pending</span>
                                @endif
                            </td>
                            <td>
                                {{$goal->line_manager_comment ?? '' }}
                            </td>
                            <td>
                                {{Carbon\Carbon::parse($goal->start_date)->format('d-m-Y') ?? '' }}
                            </td>
                            <td>
                                {{Carbon\Carbon::parse($goal->end_date)->format('d-m-Y') ?? '' }}
                            </td>
                            <td>
                                {{Carbon\Carbon::parse($goal->created_at)->format('d-m-Y') ?? '' }}
                            </td>
                            <td>
                                    @if($goal->is_published == 0)
                                    <a class="btn btn-xs btn-success" data-toggle="modal" data-target="#confirm-publish{{ $goal->id }}" data-original-title="Close"> 
                                        <span style="color:white;">Publish</span>
                                    </a>                                     
                                    @else
                                        <span class="badge bg-danger">Published</span>
                                    @endif                                
                                @can('appraisal_goal_show')
                                    <a class="btn btn-xs btn-primary" href="{{ route('appraisal.appraisal_goals.show', $goal->id) }}">
                                        {{ trans('global.view') }}
                                    </a>                            
                                @endcan
                                @can('appraisal_goal_edit')
                                    <a class="btn btn-xs btn-info" href="{{ route('appraisal.appraisal_goals.edit', ['id'=>$goal->id]) }}">
                                        {{ trans('global.edit') }}
                                    </a>
                                @endcan
                                @can('appraisal_goal_delete')
                                    <a class="btn btn-xs btn-danger" data-toggle="modal" data-target="#confirm-delete{{ $goal->id }}" data-original-title="Close"> 
                                        <span style="color:white;">{{ trans('global.delete') }}</span>
                                    </a>
                                @endcan   
                            </td>                                               
                    </tr>
                    @endforeach 
                </tbody>
            </table>
        </div>
    </div> 

сценарий с данными

    <script>
        $(function() {
  let copyButtonTrans = '{{ trans('global.datatables.copy') }}'
  let csvButtonTrans = '{{ trans('global.datatables.csv') }}'
  let excelButtonTrans = '{{ trans('global.datatables.excel') }}'
  let pdfButtonTrans = '{{ trans('global.datatables.pdf') }}'
  let printButtonTrans = '{{ trans('global.datatables.print') }}'
  let colvisButtonTrans = '{{ trans('global.datatables.colvis') }}'

  let languages = {
    'en': 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/English.json'
  };

  $.extend(true, $.fn.dataTable.Buttons.defaults.dom.button, { className: 'btn' })
  $.extend(true, $.fn.dataTable.defaults, {
    language: {
      url: languages.{{ app()->getLocale() }}
    },
    columnDefs: [

    {
        orderable: false,
        searchable: false,
        targets: -1
    }],
    select: {
      style:    'multi+shift',
      selector: 'td:first-child'
    },
    order: [],
    scrollX: true,
    pageLength: 100,
    dom: 'lBfrtip<"actions">',
    buttons: [

    ]
  });

  $.fn.dataTable.ext.classes.sPageButton = '';
});

    </script>

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

ideal index

Спасибо

1 Ответ

0 голосов
/ 18 февраля 2020

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

Как создать динамический c диапазон строк в таблице в laravel

...