工具（框架、插件）
成都创新互联公司欢迎咨询：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(""+
""+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的表格分页方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。
