Layui加载Ajax表格table数据

示例代码,有问题留言,我做详细解释,谢谢各位。

<table id="demo" class="layui-hide" lay-filter="test"></table>
        <script type="text/html" id="username">
            {{#  if(d.is_hide === 1){ }}
                {{d.username}}
            {{#  } }}
            {{#  if(d.is_hide === 2){ }}
                ****
            {{#  } }}
        </script>
        <script type="text/html" id="reply">
            {{#  if(d.msg_reply === null){ }}
                <i class="layui-icon"></i> 暂未回复
            {{#  } }}
            {{#  if(d.msg_reply != null){ }}
                {{d.msg_reply}}
            {{#  } }}
        </script>
        <script>
            layui.use('table', function(){
                var table = layui.table
                    , form = layui.form;
                //第一个实例
                table.render({
                    elem: '#demo'
                    //,height: 312
                    ,url: "{:url('index/msg/index')}" //数据接口
                    ,page: true //开启分页
                    ,response: {
                        statusCode: 200 //成功的状态码,默认:0
                    }
                    , size: 'lg' //sm小尺寸的表格 lg大尺寸
                    , cellMinWidth: 150
                    , limits: [5, 10, 15, 20, 25, 30]
                    , limit: "{:config('pages')}"
                    ,toolbar: '#toolbarDemo'
                    ,defaultToolbar: ['filter', 'exports'] //工具类
                    , loading: true
                    , id: 'test'
                    ,cols: [[ //表头
                        {field: 'id', title: 'ID', width:60, sort: true, fixed: 'left'}
                        ,{field: 'username', title: '用户名',templet:"#username",width:80}
                        ,{field: 'msg_con', title: '问题',}
                        ,{field: 'msg_reply', title: '回复',templet:"#reply"}
                        ,{field: 'create_time', title: '发布时间', sort: true}
                        ,{field: 'update_time', title: '回复时间', sort: true}
                    ]]
                });
                //监听搜索
                form.on('submit(LAY-search)', function (data) {
                    //执行重载
                    table.reload('test', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: data.field
                    });
                });
            });
        </script>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
以下是使用 Ajax 加载数据并渲染到 layui 表格的示例代码: HTML 代码: ```html <table id="myTable" lay-filter="myTable"></table> ``` JavaScript 代码: ```javascript layui.use(['table', 'jquery'], function(){ var table = layui.table; var $ = layui.jquery; table.render({ elem: '#myTable', url: '/api/getData', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} ]] }); // 监听表格工具栏 table.on('toolbar(myTable)', function(obj){ if(obj.event === 'reload'){ // 刷新表格 table.reload('myTable'); } }); // 监听表格排序 table.on('sort(myTable)', function(obj){ console.log(obj.field); // 当前排序的字段名 console.log(obj.type); // 当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序) // 重新渲染表格 table.reload('myTable', { initSort: obj, // 指定初始排序字段和排序类型 where: { // 传递额外参数 sortField: obj.field, sortOrder: obj.type } }); }); // 监听表格行双击事件 table.on('rowDouble(myTable)', function(obj){ console.log(obj.data); // 当前行的数据 console.log(obj.tr); // 当前行的 DOM 对象 // 弹出编辑框 layer.open({ type: 1, title: '编辑', content: '<form><input type="text" name="name" value="'+ obj.data.name +'" lay-verify="required|name"></form>', btn: ['保存', '取消'], yes: function(index, layero){ // 提交表单 $.ajax({ url: '/api/updateData', type: 'POST', data: { id: obj.data.id, name: $('input[name="name"]').val() }, success: function(res){ if(res.code === 0){ // 更新表格数据 obj.update({ name: $('input[name="name"]').val() }); // 关闭弹窗 layer.close(index); }else{ layer.msg('保存失败'); } }, error: function(){ layer.msg('保存失败'); } }); } }); }); }); ``` 上述代码中,通过 `table.render()` 方法初始化表格,并设置 `url` 属性为 Ajax 接口地址,`cols` 属性为表头列信息。在监听表格工具栏、排序和行双击事件时,通过 `table.reload()` 方法重新渲染表格,并通过 `where` 属性传递额外参数。在行双击事件中,弹出编辑框,并通过 Ajax 提交数据更新后,使用 `obj.update()` 方法更新表格数据,并关闭弹窗。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值