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>