bug注意点

最新推荐文章于 2019-08-19 23:20:59 发布

u010513603

最新推荐文章于 2019-08-19 23:20:59 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/u010513603/article/details/78783449

版权

一

约束input框输入类型

二

添加提示：为<a>标签添加提示信息title

三

时间范围搜索框约束，开始时间不能大于结束时间

四

上限测试，前端约束不能输入太大超出数据库字段

五

界面上注意，一点按钮或者input框无效是因为有内容覆盖上面

站点数无法输入，导致不能新增订单

原因是有个<div>&nbsp</div>覆盖到站点数上面，导致点击没反应，这在一些浏览器上才发现问题，将<div>&nbsp</div>删除；

六

datatable的使用

上面是查询条件按钮，下面是换页按钮，点击两个按钮都会发生查询操作，查询条件有上面过滤条件和当前页面条件

当点击下面换页按钮时候，也要带着上面查询条件和当前页码，当点击上面查询按钮时候，也要带着上面查询条件和当前页码，这时候会出现bug,页码在第2页，新的查询条件只查询出的条数不足一页，就会提示出错。

两种操作出错场景

场景一：先全局查询-》选中第二页-》修改查询区域条件，点击查询按钮

场景二：先全局查询-》修改查询条件-》选中第二页

解决办法：

方法一：点击查询按钮时候执行下面语句

如果datatable不为空要先重新初始化表格：

dimensionTable.ajax.reload(null, true);

energy.querybtn = function(){
     ....
    dimensionTable.ajax.reload(null, true);

}
方法二：在web服务器端分页的时候加以判断
方法三：最根治的解决办法即将只有点击查询按钮时候加条件，点击换页的时候不带最新条件

 
 var 
  dimensionTable  
 = $( 
 '#example' 
 ).DataTable( { 

 
 ajax:  
 "data.json"

 
 } ); 

 var  dimensionTable = $('#example').dataTable($.extend(true, {}, cfg, {
    "serverSide":true,
    "ajax": function (data, callback, settings) {
     var obj = getQuerytableCondition(data);
     global.ajax.jsonPost("/request/energyDimAnalyze/DimStatistics", { "objStr": JSON.stringify(obj) }, function (result) {
     var returnData = result.info;
     returnData.recordsFiltered = returnData.recordsTotal;
     var finaldata = DetailData(returnData);
     callback(finaldata);
     });
     },
    "columnDefs": [

})).api();
总之：涉及查询条件的表格，用方法三最好

额外学习

每30秒重新加载表数据(分页重置)

 
          var 
           table = $( 
          '#example' 
          ).DataTable( { 
         
          ajax:  
          "data.json" 
         
          } ); 
         
          setInterval(  
          function 
           () { 
         
          table.ajax.reload(); 
         
          }, 30000 );

每30秒重新加载表数据(分页留存)

 
          var 
           table = $( 
          '#example' 
          ).DataTable( { 
         
          ajax:  
          "data.json" 
         
          } ); 
         
          setInterval(  
          function 
           () { 
         
          table.ajax.reload(  
          null 
          ,  
          false 
           );  
          // 刷新表格数据，分页信息不会重置 
         
          }, 30000 );

使用回调函数来更新外部元素

 
          var 
           table = $( 
          '#example' 
          ).DataTable(); 
         
          table.ajax.reload(  
          function 
           ( json ) { 
         
          //这里的json返回的是服务器的数据 
         
          $( 
          '#myInput' 
          ).val( json.lastInput ); 
         
          } );