layui+jquery支持IE8的表格分页

工具(框架、插件)

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">
        <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支持红色代码的写法)

展开阅读全文

没有更多推荐了,返回首页