点击刷新
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"%> <% <html> <head> <title>test page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=8" /> <link rel="stylesheet" href="ad/layui/css/layui.css" rel="external nofollow" > <style> .left_buttons{float:left;margin-top:3px;} .search{float:right;margin-top:3px;} .dataTable{clear:both;} th{min-width:90px;text-align:center;} tfoot{text-align:center;} #modify{width:18px;padding:0 5 0 5;} #dlt{width:18px;padding:0 5 0 5;} </style> </head> <body> <div> <div class="top"> <div class="left_buttons"> <span id="add" class="layui-btn layui-btn-primary" style="border:none;font-size:16"><i class="layui-icon"></i>button1</span> <span class="layui-btn layui-btn-primary" style="border:none;font-size:16"><i class="layui-icon"></i>button2</span> </div> <div class="search"> <form class="layui-form search-input" action=""> <div class="layui-form-item layui-form-pane"> <label class="layui-form-label"><i class="layui-icon"></i></label> <div class="layui-input-block" style="width:300px"> <input type="text" name="title" required lay-verify="required" placeholder="请输入主题" autocomplete="off" class="layui-input" /> </div> </div> </form> </div> </div> <div class="dataTable"> <div class="表格内容"> 编程客栈 <table class="layui-table" lay-skin="line"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr class="table_title"> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> <th>col7</th> <th>col8</th> <th>col9</th> <th>col10</th> <th>col11</th> </tr> </thead> <tbody class="dataBody"> </tbody> <tfoot> <tr> <td colspan="11"> <span class="water-table-listbtn"></span> <span class="water-table-page"><span id="pagemsg" class="water-table-pagemsg">当前0/0页</span> <input type="button" id="fpbtn" value="首页"/> <input type="button" id="rpbtn" value="上页"/> <input type="button" id="npbtn" value="下页"/> <input type="button" id="lpbtn" value="尾页"/> <span id="pagemsg" class="water-table-pagemsg">跳转到<input type="text" id="gpinput" size="3" value="0"/>页</span> <input type="button" id="gpbtn" value="跳转"/> </span> </td> </tr> </tfoot> </table> </div> </div> </div><!-- 此处是最外围DIV --> <script src="/bhps/ad/layui/layui.js"></script> <script src="/js/jquery/jquery-1.8.3.min.js"></script> <script src="/bhps/ad/js/component.js">&l编程客栈t;/script> <script> var userId="<%=request.getAttribute("userid")%>"; var page=0; var pages = 0; var rows = 8; </script> </body> </html>
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("<tr>"+
"<th>"+isNotNUll(result.data[i].1)+"</th>"+
"<th>"+isNotNUll(result.data[i].2)+"</th>"+
"<th>"+isNotNUll(result.data[i].3)+"</th>"+
"<th>"+isNotNUll(result.data[i].4)+"</编程客栈th>"+
"<th>"+isNotNUll(result.data[i].5)+"</th>"+
"<th>"+isNotNUll(result.data[i].6)+"</th>"+
"<th>"+isNotNUll(result.data[i].7)+"</th>"+
"<th>"+isNotNUll(result.data[i].8)+"</th>"+
"<th>"+isNotNUll(result.data[i].9)+"</th>"+
"<th>"+isNotNUll(result.data[i].10)+"</th>"+
"<th>"+
"<span id=\"modify\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\"></i></span>"+
"<span id=\"dlt\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\" onClick=\"deleteTask("+result.data[i].id+",\'"+result.data[i].theme+"\'"+");\"></i></span>"+
"</th>"+
"</tr>");
//alert("hello");
//console.log(result["data"][i]);
//var o = result["data"][i];
// $(".dataBody").append("<tr>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].1)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].2)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].3)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].4)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].5)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].6)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].7)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].8)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].9)+"</th>");
// $(".dataBody").append("<th>"+isNotNUll(result.data[i].10)+"</th>");
// $(".dataBody").append("<th>"+
// "<span id=\"modify\" class=\"layui-btn编程客栈 layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\"></i></span>"+
// "<span id=\"dlt\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\" onClick=\"deleteTask("+result.data[i].id+","+result.data[i].1+");\"></i></span>"+
// "</th>");
// $(".dataBody").append("</tr>");
}
}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<totalP-1){
$("#npbtn").removeAttr("disabled");
$("#lpbtn").removeAttr("disabled");
$("#fpbtn").removeAttr("disabled");
$("#rpbtn").removeAttr("disabled");
}
}
//改变页码
function changeShowedPage(currentPage, total){
var totalPage;
if(total%rows ==0 ){
totalPage = total/rows;
}else{
totalPage = parseInt(total/rows)+1;
}
$("#pagemsg").html("当前" + currentPage + "/" +totalPage + "页, 共"+total+"条记录");
return totalPage;
}
//////////////////////////////////////分页function结束/////////////////////////////////
function deleteTask(id,theme){
// alert(id+" "+theme);
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
title:'确认'
,offset:'100px'
,content:'确定删除'+theme+'？'
,btn: ['确定','取消'] //按钮
,yes:function(){
//console.log("12345");
$.post("ADTasks.ered?reqCode=deleteTask",
{ loginuserid:userId,
id:id
},function(result){
alert(result.msg);
},"json"
)
page = 0;
rewriteTable(page,rows,1);
layer.closeAll();
}
});
});
}
注意事项
1、layer官网称layer支持IE8，但我无法调试成功，因此还是使用了layui中的弹窗方式。在IE8下，弹窗可能出现位置的偏移，需要在<head>中添加如下语句<meta http-equiv="x-ua-compatible" content="ie=8" />
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的表格分页方法就是小编分享给大家的全部内容了，qFsRKTz希望能给大家一个参考，也希望大家多多支持我们。
本文标题: layui+jquery支持IE8的表格分页方法
本文地址: http://www.cppcns.com/wangluo/javascript/277052.html
© 著作权归作者所有
举报
发表评论
0/200
