00010-layui table highly responsive full page

Posted May 25, 20201 min read

var tableIns = table.render({
elem:'# taskOptLogListTable'
, url:ctx + '/task/taskOptLog/query'
, error:admin.error
, cellMinWidth:80
, toolbar:'# taskOptLogListTable-toolbar'
, defaultToolbar:[{
title:'Conditional filtering' //Title
, layEvent:'searchDiv' //Event name, used in toolbar event
, icon:'layui-icon-search' //icon class name
'filter', 'print', 'exports']
, cols:[[
{field:'userName', title:'Operator', align:'center', width:130}
, {field:'userId', title:'Operator ID', align:'center', width:130}
, {field:'content', title:'Operational Content', align:'center', width:130}
, {field:'status', title:'status', align:'center', width:130, templet:tplStatus}
, {field:'createTime', title:'Create Time', align:'center', width:160, templet:tplCreateTime}
, {title:'operation', toolbar:'# taskOptLogListTable-bar', width:150}
, page:true
, limit:10
, limits:layui.setter.limits
, done:function(res, curr, count) {
, height:'full-110'

The main attributes are:
, height:'full-110' where 110 is the distance from the bottom, 110px.
To fix the height:, height:'500', remove the full- prefix.
If you want to limit the height, that is, depending on the amount of table data, remove the height property.

Related Posts