Laravel Yajraのデータ型は、カスタムhtml /列のスタイルをレンダリングします

Question

データ型とyajraパッケージを研究するのにかなりの時間を費やしましたが、私が必要とする結果を得ることには近づかないと言いました。私の初心者のアプローチよりも多くの知識！

私は2つのイメージを添付しています。最初のイメージは既に実装されているアプリケーションのもので、2番目は速いモックです。違いを表示するためにスローしました。

---

私は達成するために期待しています望ましい結果...

---

私が持っている現在のビュー...

---

私は基本的によ機能を必要とする各列にカスタムHTMLを追加しようとしています。これは私がその最善のアプローチ、もう1つはこれを行うためのいくつかのものをより良く、よりエレガントな方法があると想像言わないだろう動作しますが

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

私はあなたの希望の結果を得るのに役立ついくつかの考えをすることができます。 コントローラ：次のように

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

私は投稿時点でのこの答えを発見した最も簡単な方法は、ありますそれは、これが最良のアプローチではないと確信している自分よりも経験豊かな私はもっと良い解決策を投稿することができます。私のプロジェクトで

---

私は見つけることができるLaravelの集団と呼ばれる特定のパッケージ使用しています：...here..

このパッケージを使用すると、ヘルパークラスやファサードにアクセスすることができます。私のアプリケーションに固有の若干の変更を加えて、私はこのパッケージを最大限に活用することができました。

一つの同様のアプローチは、これを行うには、次のようになります。

リターンHtmlFacade ::リンクを（）を使用して

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); 
} 

注意。メソッドこれは、データテーブル上でレンダリングされる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集団はへのビルディングブロックできることが付属していますそのパッケージにカスタムメソッドを追加します。

人々に私はこれがそう同じでない場合は、より良い結果を達成するための最良かつ最もエレガントたくないです確信して言ったように、簡単に、あなたの要件にこのHTML Builderを変更する方法のアイデアを与える必要があり

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>'); 
} 

私は私のソリューションを分かち合うと思っていた、将来のソリューションのために質問を開いたままにします。