利用JS+CSS对数据进行分页

reno_k

看见许多关于分页的贴子,但始终没有找到一个自己喜欢的,也许是我没遇上,但不管怎么也好,自己动手写了一个,满足自己的需要.
个人习惯:
本人比较喜欢把分页分成2部分:后台数据源的部分,直接用procedure实现分页,这里不多说,另一部分就是前面WEB显示
实现思路:
见过比较多的做法是,把数据源load进session,然后给每页设定一个rowCount,再算出页数,然后生成页面和对应的数据.
本人比较懒,不喜欢那种老是点击页数提交的感觉,但也不喜欢用ajax来跟后台交互,把页面搞得太复杂了.
也不喜欢用控件,可能是之前.net的控件用不好的原因.剩下的,就是用js+css在一个页面实现分页了.
效果如下图:
....在最下面,是三个图片的合成
具体实现:
1.后台操作,把数据源request.setAttrib()
2.前面,在JSP里
先是获取数据
List list=null;list=(LinkedList)request.getAttribute("list");if(list==null){list=new LinkedList();}
然后是生成表格
<form action="" method="post"><input type="hidden" name="referenceno" /><div id="data"><%String pages="";int count=list.size();int p=0;int pageItemCount=20;int pageCount=count/pageItemCount+1;for(int n=0;n<count;n+=pageItemCount){%><div id="<%="div"+p %>"><table><tr class="title"><td>REFNO</td><td>JOBNO</td><td>VENDER</td><td>ORDER BY</td><td>DATE</td><td>HANGTAG</td><td>LABEL</td><td>DETAIL</td><td>PROCESS</td></tr><%out.println();String order[];for(int i=n;i<n+pageItemCount&&i<count;i++){//declare temp variantString refno="";String jobno="";String orderman="";String vender="";String orderdate=""; String ht="";String lbl="";String alternate="";//set alternate row style of classif(i%2==0)alternate="";elsealternate=" class=\"alternate\"";order=(String[])list.get(i);//string[]:0-referenceno,1-jobno,2-name(orderman),//3-vender,4-status,5-orderdate,6-ht,7-lblif(order[0]!=null && ! "null".equals(order[0])) refno=order[0];if(order[1]!=null && ! "null".equals(order[1]) && order[1].length()>3 && !"temp".equals(order[1].substring(0,4))) jobno=order[1];if(order[2]!=null && ! "null".equals(order[2])) orderman=order[2];if(order[3]!=null && ! "null".equals(order[3])) vender=order[3];if(order[5]!=null && ! "null".equals(order[5])) orderdate=order[5];if(order[6]!=null && ! "null".equals(order[6])) ht=order[6];if(order[7]!=null && ! "null".equals(order[7])) lbl=order[7];out.println(""+"<tr"+alternate+">"+"<td>"+ refno +"</td>"+"<td>"+ jobno +"</td>"+"<td>"+ vender +"</td>"+"<td>"+ orderman +"</td>"+"<td>"+ orderdate +"</td>" +"<td>"+ ht +"</td>"+"<td>"+ lbl +"</td>"+"<td><input type='button' value='DETAIL' class='btn' onclick='orderDetail(\""+refno+"\")'></td>"+"<td><input type='button' value='PROCESS' class='btn' onclick='processOrder(\""+refno+"\")'></td>"+"</tr>");}pages+=" <a style='cursor:pointer;' onclick='setPage("+(p++)+","+pageCount+")',>"+p+"</a>";%></table></div><%} %></div>Page: <%=(pages.length()>0)?pages.substring(1):"" %><script type="text/javascript">setPage(0,<%=pageCount%>);</script></form>
生成HTML后的结构如图:
...在最下面
如结构图所示,在最终的HTML里,有一个div,里面包括了3页的数据,分别存在3个div里,然后利用js+css的把对应id的div的display属性来控制显示哪1页的数据
js代码
/* * control the div display or not * @param cur the div which want to display * @param sum div count (page count) */function setPage(cur,sum){for(var i=0;i<sum;i++){var d=document.getElementById('div'+i);d.style.display="none";}var d=document.getElementById('div'+cur);d.style.display="block";}
css代码
<style type="text/css">form div {display:none;}form #data {height:530px;display:block;}form table {border-collapse:collapse;table-layout:fixed;font-size:9pt;text-align:center;}form tr.title {background-color:#aeaeae;font-weight:bold;}form tr.alternate {background-color:#d7d7d7;}form td {border:1px solid #777;}form td input.btn {width:60px;font-size:9pt;}form input.date {width:80px;}form a {text-decoration:underline;}</style>
最后,弱弱地问一下,还有没有人用java直接写jsp的吗?个人感觉用控件生成的HTML代码太难读了