首页
所有分类
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解析获取JSON数据
Apr 08 jQuery
jQuery实现多张图片上传预览（不经过后端处理）
Apr 29 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
道歉信(39) 欢迎词(65) 证婚词(21) 思想汇报(404) 岗位职责(1324) 演讲稿(869) 职业生涯规划书(234) 推荐信(292) 心得体会(660) 创业计划书(312)
You might like
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
深入php之规范编程命名小结
2013/05/15 PHP
php内存缓存实现方法
2015/01/24 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
[16:14]教你分分钟做大人：米拉娜（HEROS）
2014/11/24 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
详解python的数字类型变量与其方法
2016/11/20 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python 从list中随机取值的方法
2020/11/16 Python
如何定义一个可复用的服务
2014/09/30 面试题
应聘教师求职信
2014/07/19 职场文书
谢师宴邀请函
2015/02/02 职场文书
统计员岗位职责
2015/02/11 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年酒店工作总结
2015/04/28 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android