浏览 4513 次
|
锁定老帖子 主题：利用JS+CSS对数据进行分页
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-03-11
看见许多关于分页的贴子,但始终没有找到一个自己喜欢的,也许是我没遇上,但不管怎么也好,自己动手写了一个,满足自己的需要.
个人习惯: 本人比较喜欢把分页分成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代码太难读了 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-08-28
不敢想象3000页怎么办.
|
| 返回顶楼 | |
|
发表时间：2008-08-29
qishi001 写道 不敢想象3000页怎么办.
"你杀了我吧...." 如果数据量相对大一点,那就会产生效率问题了吧. 这种分页的探索方式,还是持观望态度... |
| 返回顶楼 | |
|
发表时间：2008-08-29
我们应该杜绝这样的分页方式，太蠢了。
像我们做搜索引擎的，每次用户随便输入一个词，返回的结果可能是10K页左右，如果要这样做的话，那估计我们的服务器早都挂掉了。 LZ要好好考虑这个问题了。。 |
| 返回顶楼 | |
