Q:table返回无数据点击排序无数据消失问题

1,当验证表单验证失败,出现红框在不失焦的情况下无法点击触发出日期弹框

trigger: 'click'

2,table返回无数据点击排序无数据消失问题(解决思路:在重载数据时判断是否有数据,无数据则重新新加载表头)

<table lay-filter="usertable"></table>
table.on("sort(usertableTow)", function () {
    if( res.data.length == 0){
      table.render({})
  }
})

3,更改下拉框数据要用   layui.form.render("select") 方法重新渲染

以下是table加分页整体代码示例

//全局变量
let startAllAppoint = 0;//开始页数
let limitAllAppoint = 10;//每页显示数据条数
let currentPageAllAppoint = 1;//当前页数
let table, layer,laydata, form;

//弹框里渲染表格
layui.use(['form', 'laydate', 'table', 'layer'], function () {
form = layui.form;
laydate = layui.laydate;
table = layui.table;
layer = layui.layer;
layer.open({
type: 1,
title: '积分变动明细',
skin: 'hire-edit',
btn: ['确定'],
area: ["1000px", "500px"],
closeBtn: 1,
anim: 2,
shadeClose: true,
content: `<form class="layui-form integralSubsidiary">
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">变动类型</label>
<div class="layui-input-block">
<select id="selectvalueArr" lay-verify="required"><option value=""></option></select>
</div>
</div>
</div>
<div class="layui-col-md5">
<div class="clearfix">
<div class="chose-date fl"><input lay-verify="required" type="text" class="layui-input" id="testDate1" placeholder="选择开始时间"></div>
<span class="chose-date-center fl tc">~</span>
<div class="chose-date fr"><input lay-verify="required" type="text" class="layui-input" id="testDate2" placeholder="选择结束时间"></div>
</div>
</div>
<div class="layui-col-md3">
<button type="button" lay-submit lay-filter="formDemo" class="layui-btn layui-btn-primary">查 询</button>
<button type="reset" class="layui-btn layui-btn-normal">重 置</button>
</div>
</div>
<div>
<table id="integralData" lay-filter="usertable"></table>
                <div id="demo7" class="tr"></div>
</div>
</form>`,
success: function(layero, index) {
       //重置全局参数,防止其他表格分页导致初始值不对
startAllAppoint = 0;//开始页数
limitAllAppoint = 10;//每页显示数据条数
currentPageAllAppoint = 1;//当前页数
laydate.render({
elem: '#testDate1',
type: 'datetime',
trigger: 'click'
});
       //获取下拉值
getIntegralDetailType(arr => {
          arr.forEach(ele =>{
          $("#selectvalueArr").append(new Option(ele.typename, ele.type));
          })
                layui.form.render("select");
form.on('submit(formDemo)', function(data){
// layer.msg(JSON.stringify(data.field));

intergralDetail()
});
})

}
})
});
function intergralDetail(){
let data ={
url: '/v1/user/cashDetails',
requesttype: 'get',
dataobj: {
"token": localStorage.getItem("usertoken"),
startTime:$("#testDate1").val(),
endTime: $("#testDate2").val(),
type: $("#selectvalueArr").val(),
pageSize: limitAllAppoint,
pageNum: startAllAppoint+1
}
}
paycenterRequest(data).then(res =>{
console.log(res)
if(res){
toPageFun('demo7',res.count);
       renderTableHead(res)
            table.on('sort(usertable)', function(obj) {
if(res.mapList.length == 0){
           renderTableHead(res)
               }
});
}

})
}
//初始化表格表头
function renderTableHead(res) {
    table.render({
elem: '#integralData',
limit: 10,
cellMinWidth: 50, //全局定义常规单元格的最小宽度,layui 2.2.1 新增
data: res.mapList,
cols: [[{
field: 'typeName',
minWidth: 80,
title: '变动类型',
sort: true,
align: 'center'
},{
field: 'time',
minWidth: 150,
title: '变动时间',
sort: true,
align: 'center'
},{
field: 'value',
minWidth: 80,
title: '变动值',
sort: true,
align: 'center'
}]],
even: true
})
}
//分页
function toPageFun(pageId,count) {
//调用分页
var laypage = layui.laypage;
laypage.render({
elem: pageId
,count: count //这个是后台返回的数据的总条数
,limit: limitAllAppoint //每页显示的数据的条数,layui会根据count,limit进行分页的计算
//,limits: [10,20,30,40,50]
,curr: currentPageAllAppoint
, layout: ['count', 'prev', 'page', 'next','skip']
,prev: '<em>←</em>'
,next: '<em>→</em>'
,jump: function(obj, first){
currentPageAllAppoint = obj.curr;
if(obj.curr){
startAllAppoint = obj.curr-1;
}else {
startAllAppoint=0;
}
limitAllAppoint = obj.limit;
if(!first){ //一定要加此判断,否则初始时会无限刷新
intergralDetail()
}
}
});
}
// 获取积分变动类型
function getIntegralDetailType(callback) {
let data ={
url: '/v1/user/getIntegralType',
requesttype: 'get',
dataobj: {"token": localStorage.getItem("usertoken")}
}
  //用promise简单封装的ajax方法
paycenterRequest(data).then(res =>{
console.log(res)
if(res && res.length> 0){
callback(res)
}
})
}

 3,记录下select常用方法,以便下次CV大法

$("#selectvalueArrTwo").find("option:selected").text()  //获取选中文本
$("#selectvalueArrTwo").val()  //获取选中code
$("#selectvalueArrTwo").val(xxx)//设置默认值
本想把日子过成诗,时而简单,时而精致,不料日子却过成了一首歌,时而不靠谱,时而不着调
原文地址:https://www.cnblogs.com/chuanq/p/12453898.html