layui+jquery支持IE8的表格分页方法
工具(框架、插件)
1、layui-v1.0.9
2、jquery-1.8.3
代码
1、jsp代码(可忽略jsp部分,转成html)
<%@pagelanguage="java"contentType="text/html;charset=utf-8"%> <%@includefile="/common/include/taglib.jsp"%> <%testpage ybutton1 [button2 o
工具(框架、插件)
1、layui-v1.0.9
2、jquery-1.8.3
代码
1、jsp代码(可忽略jsp部分,转成html)
<%@pagelanguage="java"contentType="text/html;charset=utf-8"%> <%@includefile="/common/include/taglib.jsp"%> <%testpage ybutton1 [button2 o
2、js代码
$(document).ready(function(){ $("#fpbtn").attr("disabled",true); $("#rpbtn").attr("disabled",true); rewriteTable(page,rows,1); }); functionrewriteTable(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(vari=0;i"+ " "+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]); //varo=result["data"][i]; //$(".dataBody").append(""+ " "+ " "); //$(".dataBody").append(" "); } }else{ alert("获取数据失败.."+result.message); } },"json" ); } functionisNotNUll(param){ if(param){ returnparam; }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(){ varjumpPage=$("#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); } );"+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(""+ //" "+ //"
functionbuttonControl(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&¤tP注意事项
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的表格分页方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
热门推荐
- 返回顶部
- 3162201930
- czq8825@qq.com