|
一次数据库操作---JS实现内容分页，避免无谓的数据库查询往返操作，仅提供思维供大家参考，缩短大家的学习时间。（当然对于内容过于庞大的数据，呵呵，对于一个内容对象应该不至于很大）
内容分页aspx文件js代码如下：
JS代码:
1 <script language="javascript" type="text/javascript">
2 <!--
3 function $(_sId){return document.getElementById(_sId)}//the method of get object by id
4 function setTab(op)
5 {
6 var cursel=$("currentPage").innerHTML;//get the current page num
7 var n=$("allPage").innerHTML;//get all pages num
8 if(op=="1")
9 {//add 1 operater
10 if(cursel==n)
11 {
12 return;
13 }
14 }
15 else
16 {// subtract 1 operater
17 if(cursel==1)
18 {
19 return;
20 }
21 }
22 cursel=parseInt(cursel)+op;// set value
23 for(i=1;i<=n;i++)
24 {// foreach the div
25 var con=$("con_"+i);
26 con.style.display=i==cursel?"block":"none";//control the style of the current div
27 }
28 $("currentPage").innerHTML=cursel; //set the text
29 $("spCurr").innerHTML=cursel; //set the operated result
30 }
31 // -->
32 </script>
33 </head>
34 <body>
35 <form id="form1" runat="server">
36 <div>
37 <table width="100%" border="0" cellspacing="0" cellpadding="0">
38 <tr>
39 <!-- left -->
40 <td valign="top" align="right" width="100">
41 </td>
42 <!-- body -->
43 <td align="center" valign="top" width="920">
44
45 <div style="background:red; width: 100%; height: 30px;">
46 <span>提供一种JS思维,帮助大家缩短学习的时间，仅供参考</span>
47 </div>
48 <!-- content body -->
49 <div>
50 <div style="background:blue;width: 100%; height: auto;">
51 <div>
52 <span ><%=contentIssuedate%></span>
53 </div>
54 </div>
55 <div>
56 <%=contentBody%>
57 </div>
58 <div style="clear: both;">
59 </div>
60 </div>
61 <!-- submit page change-->
62 <div style="background:blue; width: 100%; height: 30px; margin-bottom: 0px;">
63 <table>
64 <tr>
65 <td ><div id="leftSub" align="left" onclick="setTab(-1)" ><a href="#">上一页</a> </div> </td>
66 <td ><div align="center" >第 <span id="spCurr"><%=currentPage%></span> 页 共 <%=allPage%> 页</div> </td>
67 <td ><div id="rightAdd" align="right" onclick="setTab(1)" ><a href="#"> 下一页</a> </div></td>
68 </tr>
69 </table>
70 </div>
71 <div style="clear: both;">
72 </div>
73 </td>
74 <!-- right -->
75 <td valign="top" align="left" width="60">
76 </td>
77 </tr>
78 </table>
79 </div>
80 </form>
81 </body>
82 </html>
|
