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

layui数据表格的方法渲染

html代码

?

1	<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>