杰晶网络

layui+jquery支持IE8的表格分页方法
网络编程 2025/11/4 佚名
3 2

工具（框架、插件）

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="/UploadFiles/2021-04-02/layui.js">


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",
    {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",
     { 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的表格分页方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
layui,jquery,IE8,表格分页
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“layui+jquery支持IE8的表格分页方法”
暂无“layui+jquery支持IE8的表格分页方法”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/11/4

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网