1、layui-v1.0.9

2、jquery-1.8.3
代碼
1、jsp代碼(可忽略jsp部分,轉成html)


<%@ page language="java" contentType="text/html; ch" />

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

 更新時間:2019-09-29 10:01:00   作者:佚名   我要評論(0)

工具(框架、插件)
1、layui-v1.0.9

2、jquery-1.8.3
代碼
1、jsp代碼(可忽略jsp部分,轉成html)


<%@ page language="java" contentType="text/html; ch

工具(框架、插件)

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實現數據表格table分頁功能(ajax異步)
  • 解決layui-table單元格設置為百分比在ie8下不能自適應的問題
  • 基于LayUI分頁和LayUI laypage分頁的使用示例

相關文章

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

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

    工具(框架、插件) 1、layui-v1.0.9 2、jquery-1.8.3 代碼 1、jsp代碼(可忽略jsp部分,轉成html) <%@ page language="java" contentType="text/html; ch
    2019-09-29
  • 在layui中對table中的數據進行判斷(0、1)轉換為提示信息的方法

    在layui中對table中的數據進行判斷(0、1)轉換為提示信息的方法

    需要把“1”改成中文漢字: 在 done方法里面進行數據渲染: layui.use('table', function(){ var table = layui.table ,form = layui.form; table
    2019-09-29
  • php寫app用的框架整理

    php寫app用的框架整理

    PHP開發app常用的三種框架介紹 1、ThinkPHP框架 TP框架是一共快速兼容簡單的輕量級國產PHP開發框架,使用面向對象的結構和MVC模式進行開發。它可以支持Window
    2019-09-29
  • 基于Python實現大文件分割和命名腳本過程解析

    基于Python實現大文件分割和命名腳本過程解析

    日志文件分割、命名 工作中經常會收到測試同學、客戶同學提供的日志文件,其中不乏幾百M一G的也都有,畢竟壓測一晚上產生的日志量還是很可觀的,xDxD,因此
    2019-09-29
  • Django REST Framework之頻率限制的使用

    Django REST Framework之頻率限制的使用

    開放平臺的API接口調用需要限制其頻率,以節約服務器資源和避免惡意的頻繁調用 使用 自定義頻率限制組件:utils/thottle.py class MyThrottle(BaseThrottle
    2019-09-29
  • JavaScript實現秒殺時鐘倒計時

    JavaScript實現秒殺時鐘倒計時

    本文實例為大家分享了JavaScript實現秒殺時鐘倒計時的具體代碼,供大家參考,具體內容如下 功能介紹: 1.時/分/秒倒計時直至為零 所有代碼 <!DOCTYPE html
    2019-09-29
  • Java匿名內部類原理與用法詳解

    Java匿名內部類原理與用法詳解

    本文實例講述了Java匿名內部類原理與用法。分享給大家供大家參考,具體如下: 一 點睛 匿名內部類適合創建那種只需要一次使用的類,定義匿名內部類的語法格式
    2019-09-29
  • Vbs備份指定文件到指定目錄并且以日期重命名的實現代碼

    Vbs備份指定文件到指定目錄并且以日期重命名的實現代碼

    說到備份,相信大家都會想到的第一個方法就是通過windows系統自帶的window backup功能進行數據備份。后來微軟又出了system centere產品后,就出現了一個新的備
    2019-09-29
  • json字符串對象轉換代碼實例

    json字符串對象轉換代碼實例

    這篇文章主要介紹了json字符串對象轉換代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 1、將字
    2019-09-29
  • JavaScript獲取頁面元素的常用方法詳解

    JavaScript獲取頁面元素的常用方法詳解

    1、通過標簽獲取元素,返回一個數組   var li = document.getElementsByTagName('li');//標簽獲取元素   li[0].innerHTML;// 查看獲取元素的內容   l
    2019-09-29

最新評論

亿宝娱乐黑钱