在Laravel中使用DataTables插件的方法
DataTables是一个jQuery的表格插件,记录一下在Laravel中使用的常用功能和用法,比如ajax获取数据,自定义搜索,效果展现,选项说明等等,有一些细节记录下来方便以后查看。
Laravel控制器方法
接受ajaxget请求,返回数据。
dataTables会自带一些参数过来,需要按照格式返回数据,比如分页等。见dataTables官方文档说明。
代码如下:
//ajaxGET获取列表数据 publicfunctiongetList(Request$request) { $dynamicType=$request->get('dynamic_type'); $draw=$request->get('draw'); $start=$request->get('start'); $length=$request->get('length'); $groupId=$request->get('group_id'); $dynamicId=$request->get('dynamic_id'); $userid=$request->get('userid'); $isAudit=$request->get('is_audit',0); if(!$dynamicType||!in_array($dynamicType,[1,2])){ returnresponse()->json(['error'=>'缺少参数!']); } $builder=Dynamics::select(['id','userid','group_id','dynamic_id','dynamic_type','content','money','is_audit','audited_at'])->where('dynamic_type',$dynamicType); //自定义搜索 if($groupId){ $builder->where('group_id',$groupId); } if($dynamicId){ $builder->where('dynamic_id',$dynamicId); } if($userid){ $builder->where('userid',$userid); } if(!is_null($isAudit)){ $builder->where('is_audit',$isAudit); } $total=$builder->count(); $list=$builder->orderBy('id','desc')->offset($start)->take($length)->get()->toArray(); $imgInfo=[]; $dynamicIds=$this->getDynamicIds($list); if($dynamicIds){ $imgInfo=DynamicImage::whereIn('dynamic_id',$dynamicIds)->pluck('images','dynamic_id'); } $fillImages=function($item)use($imgInfo){ if(isset($imgInfo[$item['dynamic_id']])){ $item["images"]=json_decode($imgInfo[$item['dynamic_id']]); }else{ $item["images"]=[]; } return$item; }; $list=array_map($fillImages,$list); $data=[]; $data["draw"]=$draw; $data["recordsTotal"]=$total; $data["recordsFiltered"]=$total; $data["data"]=$list; returnresponse()->json($data); } //ajaxGET获取列表数据 publicfunctiongetList(Request$request) { $dynamicType=$request->get('dynamic_type'); $draw=$request->get('draw'); $start=$request->get('start'); $length=$request->get('length'); $groupId=$request->get('group_id'); $dynamicId=$request->get('dynamic_id'); $userid=$request->get('userid'); $isAudit=$request->get('is_audit',0); if(!$dynamicType||!in_array($dynamicType,[1,2])){ returnresponse()->json(['error'=>'缺少参数!']); } $builder=Dynamics::select(['id','userid','group_id','dynamic_id','dynamic_type','content','money','is_audit','audited_at'])->where('dynamic_type',$dynamicType); //自定义搜索 if($groupId){ $builder->where('group_id',$groupId); } if($dynamicId){ $builder->where('dynamic_id',$dynamicId); } if($userid){ $builder->where('userid',$userid); } if(!is_null($isAudit)){ $builder->where('is_audit',$isAudit); } $total=$builder->count(); $list=$builder->orderBy('id','desc')->offset($start)->take($length)->get()->toArray(); $imgInfo=[]; $dynamicIds=$this->getDynamicIds($list); if($dynamicIds){ $imgInfo=DynamicImage::whereIn('dynamic_id',$dynamicIds)->pluck('images','dynamic_id'); } $fillImages=function($item)use($imgInfo){ if(isset($imgInfo[$item['dynamic_id']])){ $item["images"]=json_decode($imgInfo[$item['dynamic_id']]); }else{ $item["images"]=[]; } return$item; }; $list=array_map($fillImages,$list); $data=[]; $data["draw"]=$draw; $data["recordsTotal"]=$total; $data["recordsFiltered"]=$total; $data["data"]=$list; returnresponse()->json($data); }
dataTables发ajax请求及一些选项设置
columnDefs用来自定义每个字段如何展现,可以封装自己的展现逻辑,也可以获取到这一行各个字段的值。
createdRow可以改变创建每一行的行为,比如修改这一行的样式等等。
table.draw()方法可以重新发起ajax请求。
$dataTable=$("#dataTable"); vartable=$dataTable.DataTable({ "processing":true, "serverSide":true, "pageLength":25, "lengthMenu":[10,25,50,75,100,200], "ajax":{ "url":"{{route('audit.getList')}}", "data":function(data){ data.dynamic_type="{{Request::get('dynamic_type',1)}}"; data.group_id=$("#group_id").val(); data.dynamic_id=$("#dynamic_id").val(); data.userid=$("#userid").val(); data.is_audit=$("#is_audit").val(); data.t="{{time()}}"; } }, "columns":[ {"data":"id"}, {"data":"userid"}, {"data":"group_id"}, {"data":"dynamic_type"}, {"data":"dynamic_id"}, {"data":"content"}, {"data":"images"}, {"data":"money"}, {"data":"is_audit"}, {"data":"audited_at"} ], "columnDefs":[ { "render":function(data,type,row){ if(data==1){ return"活动"; }elseif(data==2){ return"动态"; } }, "targets":3 }, { "render":function(data,type,row){ html=""; $.each(data,function(k,v){ html+=" "; }); returnhtml; }, "targets":6 }, { "render":function(data,type,row){ if(data==0){ return"未审核"; }elseif(data==1){ return"审核通过"; }elseif(data==-1){ return"审核不通过"; } }, "targets":8 }, { "render":function(data,type,row){ if(row.is_audit==0){ return" 通过 不通过"; } return"-"; }, "targets":10 } ], "createdRow":function(row,data,index){ $('td',row).eq(4).attr('style','word-break:break-all'); $('td',row).eq(2).attr('style','word-break:break-all'); $('td',row).eq(5).attr('style','word-break:break-all'); }, "language":{ processing:"数据加载中...", info:"显示第_START_至_END_条,共_TOTAL_条记录", infoEmpty:"暂无数据", lengthMenu:"显示_MENU_条记录", paginate:{ first:"首页", previous:"上一页", next:"下一页", last:"最后一页" } } }); $dataTable.find('tbody').on('click','.audit',function(){ vardata=table.row($(this).parents('tr')).data(); varid=data.id; varuserid=data.userid; vargroup_id=data.group_id; vardynamic_id=data.dynamic_id; vardynamic_type=data.dynamic_type; vartype=$(this).data('type'); audit(id,type,userid,group_id,dynamic_id,dynamic_type) }); //审核操作 functionaudit(id,type,userid,group_id,dynamic_id,dynamic_type){ $.post("{{route('audit.index')}}/"+id,{ id:id, type:type, userid:userid, group_id:group_id, dynamic_id:dynamic_id, dynamic_type:dynamic_type, _token:"{{csrf_token()}}", _method:"PUT" },function(data){ if(data.result==0){ table.ajax.reload(); toastr.success("操作成功!"); } }); } $("#is_audit").select2({ placeholder:"请选择状态", minimumResultsForSearch:Infinity }); //搜索 $("#searchBtn").click(function(){ table.draw(); }); $dataTable=$("#dataTable"); vartable=$dataTable.DataTable({ "processing":true, "serverSide":true, "pageLength":25, "lengthMenu":[10,25,50,75,100,200], "ajax":{ "url":"{{route('audit.getList')}}", "data":function(data){ data.dynamic_type="{{Request::get('dynamic_type',1)}}"; data.group_id=$("#group_id").val(); data.dynamic_id=$("#dynamic_id").val(); data.userid=$("#userid").val(); data.is_audit=$("#is_audit").val(); data.t="{{time()}}"; } }, "columns":[ {"data":"id"}, {"data":"userid"}, {"data":"group_id"}, {"data":"dynamic_type"}, {"data":"dynamic_id"}, {"data":"content"}, {"data":"images"}, {"data":"money"}, {"data":"is_audit"}, {"data":"audited_at"} ], "columnDefs":[ { "render":function(data,type,row){ if(data==1){ return"活动"; }elseif(data==2){ return"动态"; } }, "targets":3 }, { "render":function(data,type,row){ html=""; $.each(data,function(k,v){ html+=" "; }); returnhtml; }, "targets":6 }, { "render":function(data,type,row){ if(data==0){ return"未审核"; }elseif(data==1){ return"审核通过"; }elseif(data==-1){ return"审核不通过"; } }, "targets":8 }, { "render":function(data,type,row){ if(row.is_audit==0){ return" 通过 不通过"; } return"-"; }, "targets":10 } ], "createdRow":function(row,data,index){ $('td',row).eq(4).attr('style','word-break:break-all'); $('td',row).eq(2).attr('style','word-break:break-all'); $('td',row).eq(5).attr('style','word-break:break-all'); }, "language":{ processing:"数据加载中...", info:"显示第_START_至_END_条,共_TOTAL_条记录", infoEmpty:"暂无数据", lengthMenu:"显示_MENU_条记录", paginate:{ first:"首页", previous:"上一页", next:"下一页", last:"最后一页" } } }); $dataTable.find('tbody').on('click','.audit',function(){ vardata=table.row($(this).parents('tr')).data(); varid=data.id; varuserid=data.userid; vargroup_id=data.group_id; vardynamic_id=data.dynamic_id; vardynamic_type=data.dynamic_type; vartype=$(this).data('type'); audit(id,type,userid,group_id,dynamic_id,dynamic_type) }); //审核操作 functionaudit(id,type,userid,group_id,dynamic_id,dynamic_type){ $.post("{{route('audit.index')}}/"+id,{ id:id, type:type, userid:userid, group_id:group_id, dynamic_id:dynamic_id, dynamic_type:dynamic_type, _token:"{{csrf_token()}}", _method:"PUT" },function(data){ if(data.result==0){ table.ajax.reload(); toastr.success("操作成功!"); } }); } $("#is_audit").select2({ placeholder:"请选择状态", minimumResultsForSearch:Infinity }); //搜索 $("#searchBtn").click(function(){ table.draw(); });
本文主要记录给自己看,不做具体的说明了。
参考链接
dataTables官方文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。