Laravel Yajra datatables rendering custom html/column styling

Question

Я провел немало дней, исследуя данные и пакет yajra. Это говорит о том, что я не ближе к получению нужного результата и очень ценю руку помощи этому, если кто-либо с больше знаний, чем мой новичок!

Чтобы лучше объяснить, я прикрепил два изображения. Первое изображение представляет собой приложение, которое уже реализовано, а второе - быстрый макет, который я выбрал, чтобы показать разницу.

---

Желаемый результат я надеюсь достичь ...

---

Современный взгляд у меня есть ...

---

Я в основном пытаясь добавить пользовательский html к каждому столбцу, который требует функциональности. Мне удалось добиться некоторого успеха небольшой, возвращая пользовательский массив как так:

foreach ($tasks as $task) { 
    $checkBox = '<div class="checkbox"><input type="checkbox" value="63"><label></label></div>'; 
    $taskPriority = '<span class="text-info inline-block">Medium</span>'; 
      ... so on ... 
    $row = array(
     $checkBox, 
     $taskPriority, 
     ... so on ... 
    ); 
    $rows[] = $row; 
} 
$list['data'] = $rows; 
return $list; 

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

Я понимаю, что у yajra есть методы addColumn и editColumn, я использовал их, чтобы добавить столбец действия, поскольку это единственный, который, кажется, отображает любой html, любой другой метод, отличный от addColumn («action», «blah blah» '), похоже, не хочет отображать html и вместо этого отображает его как необработанный текст в строке.

На всякий случай это поможет кому угодно, вот призыв Ajax, сделанный для получения данных таблицы.

$('#taskstable').DataTable({ 
    "processing": true, 
    "retrieve": true, 
    "serverSide": true, 
    'paginate': true, 
    'searchDelay': 700, 
    "bDeferRender": true, 
    "responsive": true, 
    "autoWidth": false, 
    "pageLength": 5, 
    "lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]], 
    ajax: '/tasks/get-tasks' 
}); 

Надеюсь, кто-то может помочь снять стресс, будучи новичком! Благодарю.

Answer 1

bro я могу вам понять, что это может помочь вам получить желаемый результат. Контроллер:

public function index(Request $request) 
    { 
     $data = []; 
     $data['page_title'] = trans($this->trans_path . 'general.page.index.page-title'); 
     $data['show_modal'] = false; 
     $data['trans_path'] = $this->trans_path; 
     if ($request->get('add') && $request->get('add') == "true") { 
      $data['show_modal'] = true; 
     } 

     // TODO: Confirm this logic 
     //count no. of promoter admin 
     $data['promoter'] = User::where('user_type', AclHelper::getUsersTypeKey('promoter-admin'))->count(); 

     // for mapping policy 
     $data['admin_user_model'] = new AdminUser(); 

     //generate add Button 
     $data['add_btn_html'] = view($this->loadDefaultVars($this->view_path . '.partials._promoter_add_button'))->render(); 
     $data['assignable_user_roles'] = $this->getAssignableRolesByAuthUser(); 

     return view($this->loadDefaultVars($this->view_path . '.index'), compact('data')); 
    } 

    public function search(Request $request) 
    { 

     $data = []; 
     $columns = ['rud.*', 'us.first_name as promoter_first_name', 'us.last_name as promoter_last_name', 'users.email', 'users.username', 
      'r.name', 'r.display_name', 'rud.created_by', 'rud.promoter_id', 'users.enabled']; 
     $users = $this->getUserListJoinQuery($columns) 
      ->leftJoin('role_users_details as us', 'rud.promoter_id', '=', 'us.id') 
      ->groupBy('users.id'); 

     if (in_array(AclHelper::getUsersTypeKey('super-admin'), AclHelper::getUserRoles(), 1) || 
      in_array(AclHelper::getUsersTypeKey('support-admin'), AclHelper::getUserRoles(), 1) 
     ) { 
      $users->where('users.id', '!=', auth()->user()->id); 
      $data['users'] = $users->get(); 
     } else { 

      if (in_array(AclHelper::getUsersTypeKey('promoter-admin'), AclHelper::getUserRoles(), 1)) 
       $data['users'] = $users->where('rud.promoter_id', Auth::user()->id)->get(); 
      elseif (in_array(AclHelper::getUsersTypeKey('promoter-editor'), AclHelper::getUserRoles(), 1)) { 
       $promoter_id = Auth::user()->userDetail->promoter_id; 
       $users->where('r.name', '!=', AclHelper::getUsersTypeKey('promoter-editor')); 
       $data['users'] = $users->where('rud.promoter_id', $promoter_id)->get(); 
      } else { 
       return response('Unauthorized request made.', 401); 
      } 
     } 

     return Datatables::of($data['users']) 
      ->editColumn('user_id', function ($users) { 
       $data = view($this->loadDefaultVars($this->view_path . '.partials._action_fields'), compact('users'))->render(); 
       return $data; 
      }) 
      ->editColumn('profile_image', function ($users) { 
       if (!isset($users->profile_image)) { 
        return ""; 
       } 
       return '<img src="' . asset(config('neptrox.admin_user_path.thumbnail') . $users->profile_image) . 
       '" alt="' . $users->first_name . '" style="height: 40px;" >'; 
      }) 
      ->editColumn('name', function ($users) { 
       return $users->first_name . ' ' . $users->middle_name . ' ' . $users->last_name; 
      }) 
      ->editColumn('gender', function ($users) { 
       if ($users->gender === 'male') 
        return 'Male'; 
       elseif ($users->gender === 'female') 
        return 'Female'; 
       else 
        return 'Other'; 
      }) 
      ->editColumn('user_type', function ($users) { 
//    return $users->pivot->display_name; 
       return config('neptrox.admin-users-roles.' . $users->name . '.title'); 
      }) 
      ->editColumn('promoter', function ($users) { 
       return $users->promoter_first_name . ' ' . $users->promoter_last_name; 
      }) 
      ->editColumn('status', function ($users) { 
       if ($users->enabled === 1) { 
        return "<span class='text-success'> " . 
        '<i class="fa fa-check-circle-o text-info"></i>' . 
        "</span>"; 
       } 
       return "<span class='text-danger'>" . 
       '<i class="fa fa-ban text-danger"></i>' . 
       "</span>"; 
      }) 
      ->make(true); 

    } 

JQuery Сценарии

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script> 
<script> 

    (function (options) { 

     var route_url = options.dataTableConfigVariable.route_url; 
     var columns = options.dataTableConfigVariable.columns; 
     var order = options.dataTableConfigVariable.orderColumn; 
     if (order == 'undefined' || order == null || order == "") { 
      order = 1; 
     } 
     var config = { 
      "dom": '<t>' + 
      '<"card-footer card-pagination"<"row"<"col-md-8"p><"col-md-4 form-design1 right"l>>>', 
      "oLanguage": { 
       "sLengthMenu": " _MENU_ ", 
       "sSearchPlaceholder": "Search", 
       "oPaginate": { 
        "sNext": "<span aria-hidden='true'>»</span><span class='sr-only'>Next</span>", 
        "sPrevious": "<span aria-hidden='true'>«</span><span class='sr-only'>Previous</span>" 
       }, 
      }, 
      processing: true, 
      serverSide: true, 
      ajax: { 
       type: 'POST', 
       url: route_url.dataTable_url, 
       data: { 
        _token: $('meta[name=csrf-token]').attr("content") 
       } 
      }, 
      columns: columns, 
      'order': [[order, 'asc']] 
     }; 

     //initialize dataTables 
     var table = $('table.table').DataTable(config); 

     $('#searchField').keyup(function(){ 
      table.search($(this).val()).draw() ; 
     }); 


     //Enables or disables the performer and reload the ajax after success 
     $('body').on('click', '.enableDisable', function (e) { 
      e.preventDefault(); 
      var url = $(this).attr('href'); 
      $.ajax({ 
       type: 'GET', 
       url: url, 
       success: function (response) { 
        table.ajax.reload(null, false); 
       } 
      }); 
     }); 

     //toggle all checkbox checked or unchecked 
     $('body').on('click', 'input[name="checkAll"]', function() { 
      var checkBoxes = $("input[name=checkbox\\[\\]]"); 
      checkBoxes.prop("checked", $(this).prop("checked")); 
     }); 

     //enable selected performers 
     $('body').on('click', '#enable', function (e) { 
      var url = route_url.enableAll; 
      enableDisablePerformer(e, url); 
     }); 

     //disable selected performers 
     $('body').on('click', '#disable', function (e) { 
      var url = route_url.disableAll; 
      enableDisablePerformer(e, url); 
     }); 

     function enableDisablePerformer(e, url) { 
      e.preventDefault(); 
      var formData = $('input[name^=checkbox]'); 
      var data = {}; 
      formData.each(function (index) { 
       if ($(this).is(':checked')) { 
        data[index] = $(this).val(); 
       } 
      }); 
      $.ajax({ 
       type: 'POST', 
       url: url, 
       data: { 
        _token: $('meta[name=csrf-token]').attr("content"), 
        id: data 
       }, 
       success: function (response) { 
        if (response == 'ok') { 
         table.ajax.reload(null, false); 
         $('body').find('input[name="checkAll"]').prop('checked', false); 
        } 
       } 
      }); 
     } 


     //Delete confirmation popup 
     $('body').on('click', '.try-sweet-warningConfirm', function() { 
      var id = $(this).attr('id'); 
      swal({ 
       title: "{{ trans($trans_path.'general.delete.sure') }}", 
       text: "{{ trans($trans_path.'general.delete.message') }}", 
       type: "warning", 
       showCancelButton: true, 
       confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}", 
       confirmButtonText: "{{ trans('general.button.delete') }}", 
       cancelButtonText: "{{ trans('general.button.cancel') }}", 
       closeOnConfirm: true 
      }, function (isConfirm) { 
       if (isConfirm) { 
        $.ajax({ 
         type: 'POST', 
         url: route_url.delete, 
         data: { 
          _token: $('meta[name=csrf-token]').attr("content"), 
          id: id 
         }, 
         success: function (response) { 
          table.row($(this).closest('tr')).remove().draw(); 
          if (response == 'ok') { 
           swal({ 
            title: "{{ trans($trans_path.'general.status.delete') }}", 
            text: "{{ trans($trans_path.'general.status.deleted') }}", 
            type: "success", 
            timer: 2000, 
            confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}" 
           }); 
          } 
         } 
        }); 

       } 
      }); 
     }); 

     //Delete bulk confirmation popup 
     $('body').on('click', '#delete', function() { 
      swal({ 
       title: "{{ trans($trans_path.'general.delete.sure') }}", 
       text: "{{ trans($trans_path.'general.delete.message') }}", 
       type: "warning", 
       showCancelButton: true, 
       confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}", 
       confirmButtonText: "{{ trans('general.button.delete') }}", 
       cancelButtonText: "{{ trans('general.button.cancel') }}", 
       closeOnConfirm: true 
      }, function (isConfirm) { 
       if (isConfirm) { 
        var url =route_url.delete; 
        deleteBulkPerformer(url); 
        $('body').find('input[name="checkAll"]').prop('checked', false); 
        swal({ 
         title: "{{ trans($trans_path.'general.status.delete') }}", 
         text: "{{ trans($trans_path.'general.status.deleted') }}", 
         type: "success", 
         timer: 2000, 
         confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}" 
        }); 
       } 
      }); 
     }); 

     function deleteBulkPerformer(url){ 
      var formData = $('input[name^=checkbox]'); 

      var data = {}; 
      formData.each(function (index) { 
       if ($(this).is(':checked')) { 
        data[index] = $(this).val(); 
       } 
      }); 
      $.ajax({ 
       type: 'POST', 
       url: url, 
       data: { 
        _token: $('meta[name=csrf-token]').attr("content"), 
        id: data, 
        bulk: 'bulk' 
       }, 
       success: function (response) { 
        if (response == 'ok') { 
         table.row($(this).closest('tr')).remove().draw(); 
        } 
       } 
      }); 
     } 

    })({dataTableConfigVariable:dataTableConfigVariable}); 

</script> 

Посмотреть страницу

<script> 
     var dataTableConfigVariable = { 
      route_url: { 
       dataTable_url: '{{route("admin.admin_users.search")}}', 
       enableAll: '{{route("admin.admin_users.enableAll")}}', 
       disableAll: '{{route("admin.admin_users.disableAll")}}', 
       delete: '{{route("admin.admin_users.delete")}}' 
      }, 
      columns: [ 
       {data: 'user_id', name: 'user_id', orderable: false, searchable: false}, 
       {data: 'profile_image', name: 'profile_image', orderable: false, searchable: false}, 
       {data: 'name', name: 'name'}, 
       {data: 'user_code', name: 'user_code', orderable: false}, 
       {data: 'email', name: 'email'}, 
       {data: 'username', name: 'username'}, 
       {data: 'gender', name: 'gender'}, 
       {data: 'user_type', name: 'user_type'}, 
       {data: 'promoter', name: 'promoter', orderable: false, searchable: false}, 
       {data: 'status', name: 'status', orderable: false, searchable: false}, 
      ], 
      orderColumn: 2 
     }; 
    </script> 

Answer 2

Самого простой подход, который я нашел, как в то время я размещаю этот ответ выглядит следующим образом, Сказав это, я уверен, что это не лучший подход, и, возможно, со временем, meone с большим опытом, чем я, сможет опубликовать лучшее решение.

---

В моем проекте я использую конкретный пакет под названием Laravel Collective, который можно найти: ...here..

Используя этот пакет дает вам доступ к классу помощника и фасада. С некоторыми небольшими изменениями, характерными для моего приложения, я смог очень эффективно использовать этот пакет.

Один подобный подход был бы сделать это:

public function getTasks() 
{ 
    $tasks = $this->taskInterface->model()->all(); 
    return $this->datatables->collection($tasks) 
     ->editColumn('name', function ($model) { 
      return HtmlFacade::link("admin/tasks/{$model->id}", $model->name); 
     }) 
     ->addColumn('action', function($query) { 
      return view('backend.global.tables.actions.all-tasks-actions', compact('query')); 
     }) 
     ->make(true); 
} 

Примечание

при использовании возврата HtmlFacade :: ссылки(); метод, это вернет html, который будет отображаться в таблице данных. Полный список методов можно найти, посмотрев документацию или в моем случае, пройдя через класс, и увидев исходный код, дал мне лучшее представление о том, как их пакет работал не только, но и дает возможность добавлять дополнительные методы в класс, и именно так я пришел, чтобы получить требуемый результат.

Я не собираюсь публиковать все пользовательские классы, поскольку я не думаю, что это слишком важно для того, чтобы помогать кому-либо в будущем, как методы, которые я добавил или очень похожим на то, что пакет поставляется из коробки, единственная разница заключается в том, чтобы разрешить события onclick JavaScript и наклон CSS.

Мораль этого ответа заключается в том, чтобы позволить кому-либо еще в подобной позиции самому себе знать, что если вы уже используете этот пакет, то его возможно, вам не нужно вручную переводить все строки в массивы, чтобы передать пользовательский html в вид, и я больше не нужно делать этого:

$rows = []; 
$checkBox = '<div class="checkbox"><input type="checkbox" value="63"><label></label></div>'; 
$taskPriority = '<span class="text-info inline-block">Medium</span>'; 
ect... As seen in original post.. 

вместо этого вы можете передать пользовательские атрибуты, классы и строить из Laravel коллективного пакета Вот метод ссылка Laravel коллектив приходит с этим может быть строительным блоком для добавление пользовательских методов в их пакет.

public function link($url, $title = null, $attributes = [], $secure = null, $escape = true) 
{ 
    $url = $this->url->to($url, [], $secure); 

    if (is_null($title) || $title === false) { 
     $title = $url; 
    } 

    if ($escape) { 
     $title = $this->entities($title); 
    } 

    return $this->toHtmlString('<a href="' . $url . '"' . $this->attributes($attributes) . '>' . $title . '</a>'); 
} 

Это должно дать людям представление о том, как вы можете легко изменить Html Builder вашим требованиям, как я сказал, что я уверен, что это не самый лучший и самый элегантный недостаток достижения такой же, если не лучший результат, так Я оставлю вопрос открытым для будущих решений. Я просто решил поделиться своим решением.