工具(框架、插件)
成都创新互联公司欢迎咨询: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
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(""+ " "); //alert("hello"); //console.log(result["data"][i]); //var o = result["data"][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)+" "+ ""+ ""+ ""+ " "+ ""); // $(".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); } );"+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("
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的表格分页方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。