layui+jquery支持IE8的表格分页方法

工具（框架、插件）

成都创新互联公司欢迎咨询：028-86922220，为您提供成都网站建设网页设计及定制高端网站建设服务，成都创新互联公司网页制作领域十载，包括成都房屋鉴定等多个行业拥有丰富建站经验，选择成都创新互联公司，为企业锦上添花！

1、layui-v1.0.9
2、jquery-1.8.3

代码

1、jsp代码(可忽略jsp部分，转成html)

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ include file="/common/include/taglib.jsp"%>
<%

 
  test page
  
  
  
  
  
 
 
  
   
    
     button1
     button2
    
    
     
       
       
       
        
       
       
     
    
   
   
    
     
      
      
      
      
      
      
      
       col1
       col2
       col3
       col4
       col5
       col6
       col7
       col8
       col9
       col10
       col11
      
      
      
 
      
      
       
       
       
       当前0/0页
        
        
        
        
        跳转到页

col1	col2	col3	col4	col5	col6	col7	col8	col9	col10	col11
当前0/0页跳转到页

2、js代码

$(document).ready(function(){
 $("#fpbtn").attr("disabled", true);
 $("#rpbtn").attr("disabled", true);
 rewriteTable(page,rows,1);
 
 
});
 
function rewriteTable(page,rows,isReplace){
 $.post("ADTasks.ered?reqCode=queryAssignTask",
    {loginuserid:userId,
    start: page*rows,
    limit: rows
    },
    function(result){
     if(result.resultCode == 200){
     if(isReplace){
      $(".dataBody").html("");
     }
     pages = changeShowedPage(page+1,result.total);
     buttonControl(page,pages);
     //alert(result.data.length);
     for(var i=0; i< result.data.length; i++){
      $(".dataBody").append(""+
      ""+isNotNUll(result.data[i].1)+""+
      ""+isNotNUll(result.data[i].2)+""+
      ""+isNotNUll(result.data[i].3)+""+
      ""+isNotNUll(result.data[i].4)+""+
      ""+isNotNUll(result.data[i].5)+""+
      ""+isNotNUll(result.data[i].6)+""+
      ""+isNotNUll(result.data[i].7)+""+
      ""+isNotNUll(result.data[i].8)+""+
      ""+isNotNUll(result.data[i].9)+""+
      ""+isNotNUll(result.data[i].10)+""+
      ""+
      ""+
      ""+
      ""+
      "");
      //alert("hello");
      //console.log(result["data"][i]);
      //var o = result["data"][i];
//      $(".dataBody").append("");
//      $(".dataBody").append(""+isNotNUll(result.data[i].1)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].2)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].3)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].4)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].5)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].6)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].7)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].8)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].9)+"");
//      $(".dataBody").append(""+isNotNUll(result.data[i].10)+"");
//      $(".dataBody").append(""+
//      ""+
//      ""+
//      "");
//      $(".dataBody").append("");
     }
     }else{
     alert("获取数据失败.."+result.message);
     }
    },"json"
  );
}
 
function isNotNUll(param){
 if(param){
  return param;
 }else{
  return "";
 }
}
 
//////////////////////////////////////分页function/////////////////////////////////
//fpbtn 首页//rpbtn 上页//npbtn 下页//lpbtn 尾页//gpbtn 跳转
$("#npbtn").click(function(){
 page = page + 1;
 rewriteTable(page,rows,1);
}
);
 
$("#rpbtn").click(function(){
 page = page - 1;
 rewriteTable(page,rows,1);
 $("#npbtn").removeAttr("disabled");
 
}
);
 
$("#fpbtn").click(function(){
 page = 0;
 rewriteTable(page,rows,1);
 
}
);
 
$("#gpbtn").click(function(){
 var jumpPage = $("#gpinput").val();
 if(jumpPage<1||jumpPage>pages){
  alert("请输入符合范围的页码");
  return;
 }
 if(jumpPage - 1 == page){
  alert("当前已经是第"+jumpPage+"页");
  return;
 }
 page = jumpPage - 1;
 rewriteTable(page,rows,1);
 
}
);
 
$("#lpbtn").click(function(){
 page = pages - 1;
 rewriteTable(pages-1,rows,1);
 
}
);

function buttonControl(currentP,totalP){ //翻页按钮的可用与禁用
 if(totalP == 1){
  $("#rpbtn").attr("disabled", true);
  $("#fpbtn").attr("disabled", true);
  $("#npbtn").attr("disabled", true);
  $("#lpbtn").attr("disabled", true);
  return;
 }
 if(currentP <= 0){
  $("#rpbtn").attr("disabled", true);
  $("#fpbtn").attr("disabled", true);
  $("#npbtn").removeAttr("disabled");
  $("#lpbtn").removeAttr("disabled");
 }
 if(currentP >= totalP-1){
  $("#npbtn").attr("disabled", true);
  $("#lpbtn").attr("disabled", true);
  $("#fpbtn").removeAttr("disabled");
  $("#rpbtn").removeAttr("disabled");
 }
 if(currentP>0 && currentP

注意事项

1、layer官网称layer支持IE8，但我无法调试成功，因此还是使用了layui中的弹窗方式。在IE8下，弹窗可能出现位置的偏移，需要在中添加如下语句

2、jquery在IE8中需使用1.9.0以下的版本，而layui下需要1.8.0.以上的版本，所以jquery只能使用1.8.x

3、注意js中标红的部分，在IE8下，$(element).append()操作需要在一个append下写全一段代码，即IE8不支持红色代码的形式，而红色代码上面那种形式就可以。（FF、chrome支持红色代码的写法）

以上这篇layui+jquery支持IE8的表格分页方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

当前名称：layui+jquery支持IE8的表格分页方法
网站URL：http://scjbc.cn/article/pgdiip.html

layui+jquery支持IE8的表格分页方法

其他资讯