首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onSeptember 28, 2019

工具（框架、插件）

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

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

- Author -

CaesarJava

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 #jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
时钟(1) 双人对弈(1) 2022年7月新番(1) mysql(6) 算法(1) OVERLORD(1) SSH(3) Vscode(3) 数据表(1) 人人对战(1)
You might like
php session劫持和防范的方法
2013/11/12 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php中session定期自动清理的方法
2015/11/12 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
初学python数组的处理代码
2011/01/04 Python
基于python的汉字转GBK码实现代码
2012/02/19 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
雅萌 (YA-MAN) ：日本美容家电领域的龙头企业
2017/05/12 全球购物
澳大利亚旅游网站：Lastminute
2017/08/07 全球购物
阿根廷票务网站：StubHub阿根廷
2018/04/13 全球购物
美丽的珠宝配饰：SmallThings
2019/09/04 全球购物
师生聚会感言
2014/01/26 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
促销活动总结模板
2014/07/01 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
户外亲子活动总结
2015/05/08 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书