DataTables 是一个 jQuery 的表格插件，记录一下在 Laravel 中使用的常用功能和用法，比如 ajax 获取数据，自定义搜索，效果展现，选项说明等等，有一些细节记录下来方便以后查看。
Laravel 控制器方法
接受 ajax get 请求，返回数据。
dataTables 会自带一些参数过来，需要按照格式返回数据，比如分页等。见 dataTables 官方文档说明。
代码如下：
if (!$dynamicType || !in_array($dynamicType,[1,2])) {
return response()->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;
return response()->json($data);
}
// ajax GET 获取列表数据
public function getList(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,2])) {
return response()->json(['error' => '缺少参数！']);
}
$builder = Dynamics::select(['id',$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','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;
return response()->json($data);
}
dataTables 发 ajax 请求及一些选项设置
columnDefs 用来自定义每个字段如何展现，可以封装自己的展现逻辑，也可以获取到这一行各个字段的值。
createdRow 可以改变创建每一行的行为，比如修改这一行的样式等等。
table.draw() 方法可以重新发起 ajax 请求。
<script type="text/javascript">
$dataTable = $("#dataTable");
var table = $dataTable.DataTable({
"processing": true,last: "最后一页"
}
}
});
$dataTable.find('tbody').on('click',dynamic_type)
});
// 审核操作
function audit(id,function (data) {
if (data.result == 0) {
table.ajax.reload();
toastr.success("操作成功！");
}
});
}
$("#is_audit").select2({
placeholder: "请选择状态",minimumResultsForSearch: Infinity
});
// 搜索
$("#searchBtn").click(function(){
table.draw();
});
本文主要记录给自己看，不做具体的说明了。
参考链接
