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 接口 获取所有users
public function users()
{
$data = [
"code" => 0,
"msg" => "",
"count" => User::count(),
"data" => User::all()
];
return response()->json($data);
}