大佬教程收集整理的这篇文章主要介绍了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,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.@R_383_10586@l); 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,1); } ); $("#rpbtn").click(function(){ page = page - 1; rewriteTable(page,1); $("#npbtn").removeAttr("disabled"); } ); $("#fpbtn").click(function(){ page = 0; rewriteTable(page,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,1); } ); $("#lpbtn").click(function(){ page = pages - 1; rewriteTable(pages-1,1); } );
function buttonControl(currentP,@R_383_10586@lp){ //翻页按钮的可用与禁用 if(@R_383_10586@lP == 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); $("#npbtn").removeAttr("disabled"); $("#lpbtn").removeAttr("disabled"); } if(currentP >= @R_383_10586@lP-1){ $("#npbtn").attr("disabled",truE); $("#fpbtn").removeAttr("disabled"); $("#rpbtn").removeAttr("disabled"); } if(currentP>0 && currentP<@R_383_10586@lP-1){ $("#npbtn").removeAttr("disabled"); $("#lpbtn").removeAttr("disabled"); $("#fpbtn").removeAttr("disabled"); $("#rpbtn").removeAttr("disabled"); } } //改变页码 function changeShowedPage(currentPage,@R_383_10586@l){ var @R_383_10586@lPage; if(@R_383_10586@l%rows ==0 ){ @R_383_10586@lPage = @R_383_10586@l/rows; }else{ @R_383_10586@lPage = parseInt(@R_383_10586@l/rows)+1; } $("#pagemsg").html("当前" + currentPage + "/" +@R_383_10586@lPage + "页,共"+@R_383_10586@l+"条记录"); return @R_383_10586@lPage; } //////////////////////////////////////分页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,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的表格分页方法全部内容,希望文章能够帮你解决layui+jquery支持IE8的表格分页方法所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。