DDR爱好者之家

layui+jquery支持IE8的表格分页方法
站长资源 2024/11/24 佚名
80 1538
DDR爱好者之家 Design By 杰米

工具（框架、插件）

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的表格分页方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

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