初步自定义layui的table(laravel 12)

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

andux

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值