layui+jquery支持IE8的表格分页方法

更新时间：2020-09-16 09:36:01 作者：startmvc

工具（框架、插件）1、layui-v1.0.92、jquery-1.8.3代码1、jsp代码(可忽略jsp部分，转成html)<%@pag

工具（框架、插件）

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"></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的表格分页方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。