在 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);
}

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>

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

参考链接

dataTables 官方文档