首页
所有分类
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实现定时刷新功能代码
May 09 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
SOA面试题(9) 自我评价(886) 求职信(1029) UNIX面试题(27) J2EE面试题(19) Ruby面试题(15) 自我鉴定(671) 自荐信(981) Servlet面试题(20) Delphi面试题(13)
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
xml转json的js代码
2012/08/28 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Python冲顶大会 快来答题!
2018/01/17 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python flask搭建web应用教程
2019/11/19 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
美国乡村商店：Plow & Hearth
2016/09/12 全球购物
北美Newegg打造的全球尖货海购平台：tt海购
2018/09/28 全球购物
日本著名化妆品零售网站：Cosme Land
2019/03/01 全球购物
授权委托书范本
2014/04/03 职场文书
离婚协议书范本（2014版）
2014/09/28 职场文书
阿凡达观后感
2015/06/10 职场文书
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL