当前位置：首页 > CMS教程 > 其它CMS > 列表

在Laravel中使用DataTables插件的方法

发布:smiling　来源: PHP粉丝网 　添加日期：2021-09-20 15:57:05　浏览: 评论：0　

DataTables 是一个 jQuery 的表格插件，记录一下在 Laravel 中使用的常用功能和用法，比如 ajax 获取数据，自定义搜索，效果展现，选项说明等等，有一些细节记录下来方便以后查看。

Laravel 控制器方法

接受 ajax get 请求，返回数据。

dataTables 会自带一些参数过来，需要按照格式返回数据，比如分页等，见 dataTables 官方文档说明。

代码如下：

  1. // ajax GET 获取列表数据 
  2. public function getList(Request $request) 
  3. { 
  4.   $dynamicType = $request->get('dynamic_type'); 
  5.   $draw = $request->get('draw'); 
  6.   $start = $request->get('start'); 
  7.   $length = $request->get('length'); 
  8.   $groupId = $request->get('group_id'); 
  9.   $dynamicId = $request->get('dynamic_id'); 
  10.   $userid = $request->get('userid'); 
  11.   $isAudit = $request->get('is_audit', 0); 
  12.  
  13.   if (!$dynamicType || !in_array($dynamicType, [1, 2])) { 
  14.     return response()->json(['error' => '缺少参数！']); 
  15.   } 
  16.  
  17.   $builder = Dynamics::select(['id', 'userid', 'group_id', 'dynamic_id', 'dynamic_type', 'content', 'money', 'is_audit', 'audited_at'])->where('dynamic_type', $dynamicType); 
  18.  
  19.   //自定义搜索 
  20.   if ($groupId) { 
  21.     $builder->where('group_id', $groupId); 
  22.   } 
  23.  
  24.   if ($dynamicId) { 
  25.     $builder->where('dynamic_id', $dynamicId); 
  26.   } 
  27.  
  28.   if ($userid) { 
  29.     $builder->where('userid', $userid); 
  30.   } 
  31.  
  32.   if (!is_null($isAudit)) { 
  33.     $builder->where('is_audit', $isAudit); 
  34.   } 
  35.  
  36.   $total = $builder->count(); 
  37.   $list = $builder->orderBy('id', 'desc')->offset($start)->take($length)->get()->toArray(); 
  38.  
  39.  
  40.   $imgInfo = []; 
  41.   $dynamicIds = $this->getDynamicIds($list); 
  42.   if ($dynamicIds) { 
  43.     $imgInfo = DynamicImage::whereIn('dynamic_id', $dynamicIds)->pluck('images', 'dynamic_id'); 
  44.   } 
  45.  
  46.   $fillImages = function ($item) use ($imgInfo) { 
  47.     if (isset($imgInfo[$item['dynamic_id']])) { 
  48.       $item["images"] = json_decode($imgInfo[$item['dynamic_id']]); 
  49.     } else { 
  50.       $item["images"] = []; 
  51.     } 
  52.     return $item; 
  53.   }; 
  54.   $list = array_map($fillImages, $list); 
  55.  
  56.   $data = []; 
  57.   $data["draw"] = $draw; 
  58.   $data["recordsTotal"] = $total; 
  59.   $data["recordsFiltered"] = $total; 
  60.   $data["data"] = $list; 
  61.   return response()->json($data); 
  62. } 
  63.  
  64.  
  65. // ajax GET 获取列表数据 
  66. public function getList(Request $request) 
  67. { 
  68.   $dynamicType = $request->get('dynamic_type'); 
  69.   $draw = $request->get('draw'); 
  70.   $start = $request->get('start'); 
  71.   $length = $request->get('length'); 
  72.   $groupId = $request->get('group_id'); 
  73.   $dynamicId = $request->get('dynamic_id'); 
  74.   $userid = $request->get('userid'); 
  75.   $isAudit = $request->get('is_audit', 0); 
  76.    
  77.   if (!$dynamicType || !in_array($dynamicType, [1, 2])) { 
  78.     return response()->json(['error' => '缺少参数！']); 
  79.   } 
  80.    
  81.   $builder = Dynamics::select(['id', 'userid', 'group_id', 'dynamic_id', 'dynamic_type', 'content', 'money', 'is_audit', 'audited_at'])->where('dynamic_type', $dynamicType); 
  82.    
  83.   //自定义搜索 
  84.   if ($groupId) { 
  85.     $builder->where('group_id', $groupId); 
  86.   } 
  87.    
  88.   if ($dynamicId) { 
  89.     $builder->where('dynamic_id', $dynamicId); 
  90.   } 
  91.    
  92.   if ($userid) { 
  93.     $builder->where('userid', $userid); 
  94.   } 
  95.    
  96.   if (!is_null($isAudit)) { 
  97.     $builder->where('is_audit', $isAudit); 
  98.   } 
  99.    
  100.   $total = $builder->count(); 
  101.   $list = $builder->orderBy('id', 'desc')->offset($start)->take($length)->get()->toArray(); 
  102.    
  103.    
  104.   $imgInfo = []; 
  105.   $dynamicIds = $this->getDynamicIds($list); 
  106.   if ($dynamicIds) { 
  107.     $imgInfo = DynamicImage::whereIn('dynamic_id', $dynamicIds)->pluck('images', 'dynamic_id'); 
  108.   } 
  109.    
  110.   $fillImages = function ($item) use ($imgInfo) { 
  111.     if (isset($imgInfo[$item['dynamic_id']])) { 
  112.       $item["images"] = json_decode($imgInfo[$item['dynamic_id']]); 
  113.     } else { 
  114.       $item["images"] = []; 
  115.     } 
  116.     return $item; 
  117.   }; 
  118.   $list = array_map($fillImages, $list); 
  119.    
  120.   $data = []; 
  121.   $data["draw"] = $draw; 
  122.   $data["recordsTotal"] = $total; 
  123.   $data["recordsFiltered"] = $total; 
  124.   $data["data"] = $list; 
  125.   return response()->json($data); 
  126. } 

dataTables 发 ajax 请求及一些选项设置

columnDefs 用来自定义每个字段如何展现，可以封装自己的展现逻辑，也可以获取到这一行各个字段的值。

createdRow 可以改变创建每一行的行为，比如修改这一行的样式等等。

table.draw() 方法可以重新发起 ajax 请求。

  1. <script type="text/javascript"> 
  2.   $dataTable = $("#dataTable"); 
  3.   var table = $dataTable.DataTable({ 
  4.     "processing": true, 
  5.     "serverSide": true, 
  6.     "pageLength": 25, 
  7.     "lengthMenu": [10, 25, 50, 75, 100, 200], 
  8.     "ajax": { 
  9.       "url": "{{ route('audit.getList') }}", 
  10.       "data": function (data) { 
  11.         data.dynamic_type = "{{ Request::get('dynamic_type', 1) }}"; 
  12.         data.group_id = $("#group_id").val(); 
  13.         data.dynamic_id = $("#dynamic_id").val(); 
  14.         data.userid = $("#userid").val(); 
  15.         data.is_audit = $("#is_audit").val(); 
  16.         data.t = "{{ time() }}"; 
  17.       } 
  18.     }, 
  19.     "columns": [ 
  20.       {"data": "id"}, 
  21.       {"data": "userid"}, 
  22.       {"data": "group_id"}, 
  23.       {"data": "dynamic_type"}, 
  24.       {"data": "dynamic_id"}, 
  25.       {"data": "content"}, 
  26.       {"data": "images"}, 
  27.       {"data": "money"}, 
  28.       {"data": "is_audit"}, 
  29.       {"data": "audited_at"} 
  30.     ], 
  31.     "columnDefs": [ 
  32.       { 
  33.         "render": function (data, type, row) { 
  34.           if (data == 1) { 
  35.             return "活动"; 
  36.           } else if (data == 2) { 
  37.             return "动态"; 
  38.           } 
  39.         }, 
  40.         "targets": 3 
  41.       }, 
  42.       { 
  43.         "render": function (data, type, row) { 
  44.           html = ""; 
  45.           $.each(data, function (k, v) { 
  46.             html += "<a href='" + v.origin + "' target='_blank'><img src='" + v.origin + "' width='160' style='margin-bottom: 2px;'>"; 
  47.           }); 
  48.           return html; 
  49.         }, 
  50.         "targets": 6 
  51.       }, 
  52.       { 
  53.         "render": function (data, type, row) { 
  54.           if (data == 0) { 
  55.             return "未审核"; 
  56.           } else if (data == 1) { 
  57.             return "审核通过"; 
  58.           } else if (data == -1) { 
  59.             return "审核不通过"; 
  60.           } 
  61.         }, 
  62.         "targets": 8 
  63.       }, 
  64.       { 
  65.         "render": function (data, type, row) { 
  66.           if (row.is_audit == 0) { 
  67.             return "<a class='btn btn-primary audit' data-type = 1>通过</a> <a class='btn btn-danger audit' data-type = 2>不通过</a>"; 
  68.           } 
  69.           return "-"; 
  70.         }, 
  71.         "targets": 10 
  72.       } 
  73.     ], 
  74.     "createdRow": function (row, data, index) { 
  75.       $('td', row).eq(4).attr('style', 'word-break:break-all'); 
  76.       $('td', row).eq(2).attr('style', 'word-break:break-all'); 
  77.       $('td', row).eq(5).attr('style', 'word-break:break-all'); 
  78.     }, 
  79.     "language": { 
  80.       processing: "数据加载中...", 
  81.       info: "显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条记录", 
  82.       infoEmpty: "暂无数据", 
  83.       lengthMenu: "显示 _MENU_ 条记录", 
  84.       paginate: { 
  85.         first: "首页", 
  86.         previous: "上一页", 
  87.         next: "下一页", 
  88.         last: "最后一页" 
  89.       } 
  90.     } 
  91.   }); 
  92.  
  93.   $dataTable.find('tbody').on('click', '.audit', function () { 
  94.     var data = table.row($(this).parents('tr')).data(); 
  95.     var id = data.id; 
  96.     var userid = data.userid; 
  97.     var group_id = data.group_id; 
  98.     var dynamic_id = data.dynamic_id; 
  99.     var dynamic_type = data.dynamic_type; 
  100.     var type = $(this).data('type'); 
  101.     audit(id, type, userid, group_id, dynamic_id, dynamic_type) 
  102.   }); 
  103.  
  104.   // 审核操作 
  105.   function audit(id, type, userid, group_id, dynamic_id, dynamic_type) { 
  106.     $.post("{{ route('audit.index') }}/" + id, { 
  107.       id: id, 
  108.       type: type, 
  109.       userid: userid, 
  110.       group_id: group_id, 
  111.       dynamic_id: dynamic_id, 
  112.       dynamic_type: dynamic_type, 
  113.       _token: "{{ csrf_token() }}", 
  114.       _method: "PUT" 
  115.     }, function (data) { 
  116.       if (data.result == 0) { 
  117.         table.ajax.reload(); 
  118.         toastr.success("操作成功！"); 
  119.       } 
  120.     }); 
  121.   } 
  122.  
  123.   $("#is_audit").select2({ 
  124.     placeholder: "请选择状态", 
  125.     minimumResultsForSearch: Infinity 
  126.   }); 
  127.  
  128.   // 搜索 
  129.   $("#searchBtn").click(function(){ 
  130.     table.draw(); 
  131.   }); 
  132. </script> 
  133.    
  134. <script type="text/javascript"> 
  135.   $dataTable = $("#dataTable"); 
  136.   var table = $dataTable.DataTable({ 
  137.     "processing": true, 
  138.     "serverSide": true, 
  139.     "pageLength": 25, 
  140.     "lengthMenu": [10, 25, 50, 75, 100, 200], 
  141.     "ajax": { 
  142.       "url": "{{ route('audit.getList') }}", 
  143.       "data": function (data) { 
  144.         data.dynamic_type = "{{ Request::get('dynamic_type', 1) }}"; 
  145.         data.group_id = $("#group_id").val(); 
  146.         data.dynamic_id = $("#dynamic_id").val(); 
  147.         data.userid = $("#userid").val(); 
  148.         data.is_audit = $("#is_audit").val(); 
  149.         data.t = "{{ time() }}"; 
  150.       } 
  151.     }, 
  152.     "columns": [ 
  153.       {"data": "id"}, 
  154.       {"data": "userid"}, 
  155.       {"data": "group_id"}, 
  156.       {"data": "dynamic_type"}, 
  157.       {"data": "dynamic_id"}, 
  158.       {"data": "content"}, 
  159.       {"data": "images"}, 
  160.       {"data": "money"}, 
  161.       {"data": "is_audit"}, 
  162.       {"data": "audited_at"} 
  163.     ], 
  164.     "columnDefs": [ 
  165.       { 
  166.         "render": function (data, type, row) { 
  167.           if (data == 1) { 
  168.             return "活动"; 
  169.           } else if (data == 2) { 
  170.             return "动态"; 
  171.           } 
  172.         }, 
  173.         "targets": 3 
  174.       }, 
  175.       { 
  176.         "render": function (data, type, row) { 
  177.           html = ""; 
  178.           $.each(data, function (k, v) { 
  179.             html += "<a href='" + v.origin + "' target='_blank'><img src='" + v.origin + "' width='160' style='margin-bottom: 2px;'>"; 
  180.           }); 
  181.           return html; 
  182.         }, 
  183.         "targets": 6 
  184.       }, 
  185.       { 
  186.         "render": function (data, type, row) { 
  187.           if (data == 0) { 
  188.             return "未审核"; 
  189.           } else if (data == 1) { 
  190.             return "审核通过"; 
  191.           } else if (data == -1) { 
  192.             return "审核不通过"; 
  193.           } 
  194.         }, 
  195.         "targets": 8 
  196.       }, 
  197.       { 
  198.         "render": function (data, type, row) { 
  199.           if (row.is_audit == 0) { 
  200.             return "<a class='btn btn-primary audit' data-type = 1>通过</a> <a class='btn btn-danger audit' data-type = 2>不通过</a>"; 
  201.           } 
  202.           return "-"; 
  203.         }, 
  204.         "targets": 10 
  205.       } 
  206.     ], 
  207.     "createdRow": function (row, data, index) { 
  208.       $('td', row).eq(4).attr('style', 'word-break:break-all'); 
  209.       $('td', row).eq(2).attr('style', 'word-break:break-all'); 
  210.       $('td', row).eq(5).attr('style', 'word-break:break-all'); 
  211.     }, 
  212.     "language": { 
  213.       processing: "数据加载中...", 
  214.       info: "显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条记录", 
  215.       infoEmpty: "暂无数据", 
  216.       lengthMenu: "显示 _MENU_ 条记录", 
  217.       paginate: { 
  218.         first: "首页", 
  219.         previous: "上一页", 
  220.         next: "下一页", 
  221.         last: "最后一页" 
  222.       } 
  223.     } 
  224.   }); 
  225.    
  226.   $dataTable.find('tbody').on('click', '.audit', function () { 
  227.     var data = table.row($(this).parents('tr')).data(); 
  228.     var id = data.id; 
  229.     var userid = data.userid; 
  230.     var group_id = data.group_id; 
  231.     var dynamic_id = data.dynamic_id; 
  232.     var dynamic_type = data.dynamic_type; 
  233.     var type = $(this).data('type'); 
  234.     audit(id, type, userid, group_id, dynamic_id, dynamic_type) 
  235.   }); 
  236.    
  237.   // 审核操作 
  238.   function audit(id, type, userid, group_id, dynamic_id, dynamic_type) { 
  239.     $.post("{{ route('audit.index') }}/" + id, { 
  240.       id: id, 
  241.       type: type, 
  242.       userid: userid, 
  243.       group_id: group_id, 
  244.       dynamic_id: dynamic_id, 
  245.       dynamic_type: dynamic_type, 
  246.       _token: "{{ csrf_token() }}", 
  247.       _method: "PUT" 
  248.     }, function (data) { 
  249.       if (data.result == 0) { 
  250.         table.ajax.reload(); 
  251.         toastr.success("操作成功！"); 
  252.       } 
  253.     }); 
  254.   } 
  255.    
  256.   $("#is_audit").select2({ 
  257.     placeholder: "请选择状态", 
  258.     minimumResultsForSearch: Infinity 
  259.   }); 
  260.    
  261.   // 搜索 
  262.   $("#searchBtn").click(function(){ 
  263.     table.draw(); 
  264.   }); 
  265. </script> 

本文主要记录给自己看，不做具体的说明了。

Tags: Laravel DataTables

分享到：

相关文章

推荐文章

热门文章

最新评论文章