工具（框架、插件）
成都创新互联公司欢迎咨询：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
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的表格分页方法
文章起源：
http://cdkjz.cn/article/pgdiip.html
