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>本文主要記錄給自己看，不做具體的說明了。
參考鏈接
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
圖片精選
