layui使用遇到的问题记录

记录一次界面异常刷新

1.编辑页面，点击保存 或者点击其他事件时，执行成功了，但是界面刷新 导致界面关闭失败等问题

首先问题可能是 保存请求失败，（保存时建议同步请求，异步可能不稳定，不是专业前端这个问题我也不太清楚）

$.ajax({
            type: "POST",
            url: context + "/service/fast/checkData/insert",
            data: JSON.stringify(data), //post请求  格式化请求参数
            contentType: "application/json",
            dataType: 'json',
            async: false, //这里控制同步 默认异步
            success: function (result) {
                // 在这里处理返回的结果
                console.log(data);
                clossWin()
            },
            error: function (xhr, textStatus, errorThrown) {
                // 在这里处理错误情况
                console.log("请求失败：" + textStatus + "，错误信息：" + errorThrown);
            }
        })

第二种情况，点击按钮
按钮执行完毕之后，刷新页面；
原因 没有定义button类型 type=“button” //不定义点击后 界面好像类似于重新提交一次 导致刷新

<button id="create" type="button" class="layui-btn layui-btn-normal">重新生成</button>

这两个小问题不大但是很折磨人！

layui分页 table.render()

1.假分页实现 查出所有数据 前端进行分页

table.render({
            elem: '#ID-table-demo-data'  //table id
            ,toolbar: "#toolbarDemo"  
            ,url: context + "/service/yearOverview/allData"
            ,page: true //开启分页，
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                console.log("aaa="+this);
                console.log("bbb"+JSON.stringify(res));
                console.log("curr==="+this.page.curr);

                //(前端来实现)分页：
                //这是前台 用res.data接受全部数据 再根据当前页的条件从全部数据中选取一部分数据显示出来
                if(this.page.curr){
                    //若为第二页 则curr为2 页面显示的数据就是从res.data集合数组里的 （2-1）*limit（10）=10 到 limit（10）*2=20的数据
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    // 一开始就是第一页 则就是 显示的数据就是从res.data集合数组里的0到limit（10）中
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": 0, //解析接口状态  layui 默认0为成功  
                    "msg": res.msg, //解析提示文本
                    "count": res.data.length, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            ,cols: [[ //表头
                {type: 'checkbox',width:'5%'},
                {field: 'id', title: 'id', hide : true},
                {field: 'year', title: '年份', width: '10%'},
                {field: 'belongProvince', title: '省份', width: '10%'},
                {field: 'overviewType', title: '类型', width: '10%'},
                {field: 'overview', title: '内容', width: '65%'},]]
        });

2.后端分页时 总是报数字空指针异常 (后端oracle！！！！)

java.lang.NumberFormatException

打上断点检查下 发现并没有进行字符串转数字的操作，但是却一直报这个错误
查看前端传的参数
发现table.render 开启分页会默认传 limit page 这两个值
测试remove掉map中的这两个参数 查询成功！！

所以为了实现分页 只能后端对 limit page进行操作后 重新自定义赋值
例：（这种写法反正是不太美观 建议封装或者其他方法 不过这个也比较直观）

Integer limit = (Integer) param.get("limit");
		//根据limit  page  求出  分页参数
        Integer page = (Integer) param.get("page");
        param.put("li", limit + "");  // 10  结尾
        param.put("sta", (page - 1) * limit + "");  //0  开始
        param.remove("limit");
        param.remove("page");
        Map<String,Object> result = new HashMap();
        result.put("data",fastCheckDataMapper.selectEquipmentCheckDataList(param));
        param.remove("li");
        param.remove("sta");
        //移除 分页参数  获取总数
        result.put("total",(fastCheckDataMapper.selectEquipmentCheckDataList(param)).size());

<select id="selectEquipmentCheckDataList" resultType="map" parameterType="map" >
    select * from BM_FAST_CHECK_DATA
    <where> 1=1
      <if test="null != sampleName and ''.toString() != sampleName" >
          and SAMPLE_NAME = #{sampleName,jdbcType=VARCHAR}
      </if>
    </where>
    <!-- 记录传入的参数 -->
    <if test="sta!=null and sta!='' and li!=null and li!=''">
      limit #{sta},#{li}
    </if>
  </select>

后来查了一下还是关键字的锅