php datatables,在Laravel中使用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 请求。

$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 += "";

});

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 "通过 不通过";

}

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();

});

$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 += "";

});

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 "通过 不通过";

}

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();

});

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

参考链接

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