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

看见许多关于分页的贴子,但始终没有找到一个自己喜欢的,也许是我没遇上,但不管怎么也好,自己动手写了一个,满足自己的需要.
个人习惯:
本人比较喜欢把分页分成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 variant
								String refno="";
								String jobno="";
								String orderman="";
								String vender="";
								String orderdate=""; 
								String ht="";
								String lbl="";
								String alternate="";
								//set alternate row style of class
								if(i%2==0)
									alternate="";
								else
									alternate=" class=\"alternate\"";
								
								order=(String[])list.get(i);
								//string[]:0-referenceno,1-jobno,2-name(orderman),
								//3-vender,4-status,5-orderdate,6-ht,7-lbl
								if(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代码太难读了

评论

3 楼 glamey 2008-08-29  

我们应该杜绝这样的分页方式，太蠢了。

像我们做搜索引擎的，每次用户随便输入一个词，返回的结果可能是10K页左右，如果要这样做的话，那估计我们的服务器早都挂掉了。
LZ要好好考虑这个问题了。。

2 楼 ICBC-JavaBoy 2008-08-29  

qishi001 写道

不敢想象3000页怎么办.

"你杀了我吧...."
如果数据量相对大一点,那就会产生效率问题了吧.
这种分页的探索方式,还是持观望态度...

1 楼 qishi001 2008-08-28  

不敢想象3000页怎么办.