当前位置：首页 > news >正文

初步自定义layui的table（laravel 12）

news 来源：原创 2025/4/28 8:21:39

layui的table是非常好的表格，有美观的样式，对接起来也很便捷。使用后端翻页传过来的数据，本地测试是好的，部署到服务器时，翻页不起作用。故而暂时采用一次性读取全部数据，发送给table，界面如下所示。

layui的table有个序号，可以方便的显示数据的排序行数。

LAY_CHECKED	当前行的选中状态	可读可写
LAY_DISABLED	当前行是否禁止选择	可读可写
LAY_INDEX	当前行下标。每页重新从零开始计算	只读
LAY_NUM	当前行序号，对全部数据重新排序	只读
LAY_COL	当前列的表头属性选项	只读

一次性读取所有数据，table表格会一次全部显示出来，这个时候需要手动分割，只取当前页的数据进行展示，如果是从后端传过来分页的数据，则不会出现这个问题，但不知为啥，我部署到服务器上，翻页不起作用。

        , parseData: function(res) {var result;if (this.page.curr) {result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);} else {result = res.data.slice(0, this.limit);}return {"code": res.code, "msg": res.msg, "count": res.count, "data": result};}

操作的按钮，包括修改和删除两个，在layui的table模板templet里面，对laravel的blade模板函数，需要用引号包起来。

              title: '操作', width: 120, templet: function(d) {htmls = '<div style="display: flex;align-items: center;">';if (d.id == '{{ Auth::user()->id }}') {htmls = `<a href="javascript:;" lay-event="edit"><i class="layui-icon layui-icon-edit" style="border: 1px solid #ccc;padding:4px;"></i></a>`;}if (d.id != '{{ Auth::user()->id }}' && '{{ Auth::user()->is_admin }}' == 1) {htmls += `<a href="javascript:;" lay-event="destroy" class="btn-delete"><i class="layui-icon layui-icon-delete" style="border: 1px solid #ccc;padding:4px;"></i></a>`;}htmls += '</div>';return htmls;}

最后就是传给表格的数据，需要组合一下，需要有code=0的返回值才行。

    // layui table  接口 获取所有userspublic function users(){$data = ["code" => 0,"msg" => "","count" => User::count(),"data" => User::all()];return response()->json($data);}