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

论坛 期权论坛     
niminba   2021-5-23 02:06   27   0
<p><strong>工具(框架、插件)</strong></p>
<p>1、layui-v1.0.9<br>
2、jquery-1.8.3</p>
<p>代码</p>
<p><strong>1、jsp代码(可忽略jsp部分,转成html)</strong></p>
<div class="blockcode">
<pre class="brush:xhtml;">
&lt;%@ page language="java" contentType="text/html; charset=utf-8"%&gt;
&lt;%@ include file="/common/include/taglib.jsp"%&gt;
&lt;%
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;test page&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  &lt;meta http-equiv="x-ua-compatible" content="ie=8" /&gt;
  &lt;link rel="stylesheet" href="ad/layui/css/layui.css" rel="external nofollow" &gt;
  &lt;style&gt;
   .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;}
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div&gt;
   &lt;div class="top"&gt;
    &lt;div class="left_buttons"&gt;
     &lt;span id="add" class="layui-btn layui-btn-primary" style="border:none;font-size:16"&gt;&lt;i class="layui-icon"&gt;&lt;/i&gt;button1&lt;/span&gt;
     &lt;span class="layui-btn layui-btn-primary" style="border:none;font-size:16"&gt;&lt;i class="layui-icon"&gt;&lt;/i&gt;button2&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="search"&gt;
     &lt;form class="layui-form search-input" action=""&gt;
       &lt;div class="layui-form-item layui-form-pane"&gt;
       &lt;label class="layui-form-label"&gt;&lt;i class="layui-icon"&gt;&lt;/i&gt;&lt;/label&gt;
       &lt;div class="layui-input-block" style="width:300px"&gt;
        &lt;input type="text" name="title" required lay-verify="required" placeholder="请输入主题" autocomplete="off" class="layui-input" /&gt;
       &lt;/div&gt;
       &lt;/div&gt;
     &lt;/form&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="dataTable"&gt;
    &lt;div class="表格内容"&gt;
     &lt;table class="layui-table" lay-skin="line"&gt;
      &lt;colgroup&gt;
      &lt;col width="150"&gt;
      &lt;col width="200"&gt;
      &lt;col&gt;
      &lt;/colgroup&gt;
      &lt;thead&gt;
      &lt;tr class="table_title"&gt;
       &lt;th&gt;col1&lt;/th&gt;
       &lt;th&gt;col2&lt;/th&gt;
       &lt;th&gt;col3&lt;/th&gt;
       &lt;th&gt;col4&lt;/th&gt;
       &lt;th&gt;col5&lt;/th&gt;
       &lt;th&gt;col6&lt;/th&gt;
       &lt;th&gt;col7&lt;/th&gt;
       &lt;th&gt;col8&lt;/th&gt;
       &lt;th&gt;col9&lt;/th&gt;
       &lt;th&gt;col10&lt;/th&gt;
       &lt;th&gt;col11&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="dataBody"&gt;

      &lt;/tbody&gt;
      &lt;tfoot&gt;
       &lt;tr&gt;
       &lt;td colspan="11"&gt;
       &lt;span class="water-table-listbtn"&gt;&lt;/span&gt;
       &lt;span class="water-table-page"&gt;&lt;span id="pagemsg" class="water-table-pagemsg"&gt;当前0/0页&lt;/span&gt;
        &lt;input type="button" id="fpbtn" value="首页"/&gt;
        &lt;input type="button" id="rpbtn" value="上页"/&gt;
        &lt;input type="button" id="npbtn" value="下页"/&gt;
        &lt;input type="button" id="lpbtn" value="尾页"/&gt;
        &lt;span id="pagemsg" class="water-table-pagemsg"&gt;跳转到&lt;input type="text" id="gpinput" size="3" value="0"/&gt;页&lt;/span&gt;
        &lt;input type="button" id="gpbtn" value="跳转"/&gt;
       &lt;/span&gt;
       &lt;/td&gt;
       &lt;/tr&gt;
      &lt;/tfoot&gt;
     &lt;/table&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;&lt;!-- 此处是最外围DIV --&gt;
  &lt;script src="/bhps/ad/layui/layui.js"&gt;&lt;/script&gt;
  &lt;script src="/js/jquery/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="/bhps/ad/js/component.js"&gt;&lt;/script&gt;

  &lt;script&gt;
  var userId="&lt;%=request.getAttribute("userid")%&gt;";
  var page=0;
  var pages = 0;
  var rows = 8;
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</div>
<p><strong>2、js代码</strong></p>
<div class="blockcode">
<pre class="brush:js;">
$(document).ready(function(){
$("#fpbtn").attr("disabled", true);
$("#rpbtn").attr("disabled", true);
rewriteTable(page,rows,1);


});

function rewriteTable(page,rows,isReplace){
$.post("ADTasks.ered&#63;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&lt; result.data.length; i++){
      $(".dataBody").append("&lt;tr&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].1)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].2)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].3)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].4)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].5)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].6)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].7)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].8)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].9)+"&lt;/th&gt;"+
      "&lt;th&gt;"+isNotNUll(result.data[i].10)+"&lt;/th&gt;"+
      "&lt;th&gt;"+
      "&lt;span id=\"modify\" class=\"layui-btn layui-btn-primary\" style={LL
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:1060120
帖子:212021
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP