layui+jquery支持IE8的表格分页方法-偶像资源网

工具（框架、插件）

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论