站长资源网络编程
在Laravel中使用DataTables插件的方法
简介DataTables 是一个 jQuery 的表格插件，记录一下在 Laravel 中使用的常用功能和用法，比如 ajax 获取数据，自定义搜索，效果展现，选项说明等等，有一些细节记录下来方便以后查看。Laravel 控制器方法接受 ajax get 请求，返回数据。dataTables 会自
DataTables 是一个 jQuery 的表格插件，记录一下在 Laravel 中使用的常用功能和用法，比如 ajax 获取数据，自定义搜索，效果展现，选项说明等等，有一些细节记录下来方便以后查看。
Laravel 控制器方法
接受 ajax get 请求，返回数据。
dataTables 会自带一些参数过来，需要按照格式返回数据，比如分页等。见 dataTables 官方文档说明。
代码如下：
// 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, [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, [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);
}
dataTables 发 ajax 请求及一些选项设置
columnDefs 用来自定义每个字段如何展现，可以封装自己的展现逻辑，也可以获取到这一行各个字段的值。
createdRow 可以改变创建每一行的行为，比如修改这一行的样式等等。
table.draw() 方法可以重新发起 ajax 请求。
<script type="text/javascript">
$dataTable = $("#dataTable");
var table = $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 "活动";
} else if (data == 2) {
return "动态";
}
},
"targets": 3
},
{
"render": function (data, type, row) {
html = "";
$.each(data, function (k, v) {
html += "<a href='" + v.origin + "' target='_blank'><img src='" + v.origin + "' width='160' style='margin-bottom: 2px;'>";
});
return html;
},
"targets": 6
},
{
"render": function (data, type, row) {
if (data == 0) {
return "未审核";
} else if (data == 1) {
return "审核通过";
} else if (data == -1) {
return "审核不通过";
}
},
"targets": 8
},
{
"render": function (data, type, row) {
if (row.is_audit == 0) {
return "<a class='btn btn-primary audit' data-type = 1>通过</a> <a class='btn btn-danger audit' data-type = 2>不通过</a>";
}
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 () {
var data = table.row($(this).parents('tr')).data();
var id = data.id;
var userid = data.userid;
var group_id = data.group_id;
var dynamic_id = data.dynamic_id;
var dynamic_type = data.dynamic_type;
var type = $(this).data('type');
audit(id, type, userid, group_id, dynamic_id, dynamic_type)
});
// 审核操作
function audit(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();
});
</script>
<script type="text/javascript">
$dataTable = $("#dataTable");
var table = $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 "活动";
} else if (data == 2) {
return "动态";
}
},
"targets": 3
},
{
"render": function (data, type, row) {
html = "";
$.each(data, function (k, v) {
html += "<a href='" + v.origin + "' target='_blank'><img src='" + v.origin + "' width='160' style='margin-bottom: 2px;'>";
});
return html;
},
"targets": 6
},
{
"render": function (data, type, row) {
if (data == 0) {
return "未审核";
} else if (data == 1) {
return "审核通过";
} else if (data == -1) {
return "审核不通过";
}
},
"targets": 8
},
{
"render": function (data, type, row) {
if (row.is_audit == 0) {
return "<a class='btn btn-primary audit' data-type = 1>通过</a> <a class='btn btn-danger audit' data-type = 2>不通过</a>";
}
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 () {
var data = table.row($(this).parents('tr')).data();
var id = data.id;
var userid = data.userid;
var group_id = data.group_id;
var dynamic_id = data.dynamic_id;
var dynamic_type = data.dynamic_type;
var type = $(this).data('type');
audit(id, type, userid, group_id, dynamic_id, dynamic_type)
});
// 审核操作
function audit(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();
});
</script>
本文主要记录给自己看，不做具体的说明了。
参考链接
dataTables 官方文档
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。