在Laravel中使用DataTables插件的方法

2023-09-12 05:10:05 332

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官方文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

在Laravel中使用DataTables插件的方法

热门推荐

随机推荐