layui数据表格的渲染方式--方法渲染

layui数据表格的方法渲染

html代码

 <table class="layui-table" id="test" lay-filter="test"></table>

 

js代码

<script type="text/javascript">
    layui.use(['table'], function () {
        var $ = layui.jquery,
            table = layui.table,
        table.render({
            elem: '#test' //指定原始table容器的选择器或DOM,方法渲染必填项
            , url: '/Software/GetSoftware'  //数据接口url
            , cellMinWidth: 110 // 初始化表格固定宽度
            , even: true  
            , id: 'test'  //表格的id
            , page: true  //分页是否开启  true false
            , toolbar: '#toolbarDemo' //
            ,request: { //请求值  
                pageName: 'page'  //分页数
                , limitName: 'limit'  //行数
            }
            , cols: [[  //数据
                {
                    field: 'HotelName', title: '酒店名称', fixed: 'left', align: 'left', width:250, templet: '<div><span title="{{d.HotelName}}">{{d.HotelName}}</span></div>'
                }  //templet是鼠标悬停显示
                , { field: 'HotelId', title: '酒店ID', align: 'left' }
                , { field: 'Training', title: '负责人', align: 'left' }
                , { field: 'Docking', title: '对接人', align: 'left' }
                , { field: 'DeskPhone', title: '联系电话', align: 'left' }

                , { fixed: 'right', title: '操作', toolbar: '#barDemo', width:150, align: 'center' }
            ]]
            , response: { //返回值
                statusName: 'Context'
                , countName: 'count'
                , dataName: 'data'
            }
            , done: function (res, curr, count) {
                $("test").css("width", "100%", "height", "100%");
                };
                console.log("监听where:", this.where);//F12的时候打印使用
                tableFilterIns.reload();//重载的时候用到,可以忽略
            },
        });
    })
</script>

  

  

posted @ 2022-08-18 11:28  左耳*  阅读(709)  评论(0编辑  收藏  举报