一次数据库操作---JS实现内容分页,避免无谓的数据库查询往返操作,仅提供思维供大家参考,缩短大家的学习时间。(当然对于内容过于庞大的数据,呵呵,对于一个内容对象应该不至于很大)
内容分页aspx文件js代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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>
83
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>
83
相应的C# cs文件,先引用using System.Text;其中的stringbuilder相对于string性能更好!
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 protected string contentBody;
2 protected string contentIssuedate;
3 protected string currentPage;
4 protected string allPage;
5
6 protected void Page_Load(object sender, EventArgs e)
7 {
8 BindContent();//提取内容
9 }
10 private void BindContent()
11 {
12 this.contentIssuedate = DateTime.Now.ToString();
13 // 用简单的数组代替正则表达式来进行相应的内容分组
14 string[] pages = new string[5] { "第<br>一<br>页<br>的<br>内<br>容", "第<br>二<br>页<br>的<br>内<br>容", "第<br>三<br>页<br>的<br>内<br>容", "第<br>四<br>页<br>的<br>内<br>容", "第<br>五<br>页<br>的<br>内<br>容" };
15 this.allPage = pages.Length.ToString();
16 this.currentPage ="1";
17 StringBuilder sb = new StringBuilder();
18 //设置所有的内容 进行JS的操作 display:none隐藏内容----
19 sb.Append("<div id='currentPage' style='display: none;'>1</div>");
20 sb.Append("<div id='allPage' style='display: none;'>" + pages.Length + "</div>");
21 for (int i = 0; i < pages.Length; i++)
22 {
23 int temp = i + 1;
24 if (i == 0)
25 {
26 sb.Append("<div id='con_" + temp + "'>");
27 sb.Append(pages[i].ToString());
28 sb.Append("</div>");
29 }
30 else
31 {
32 sb.Append("<div id='con_" + temp + "' style='display: none;'>");
33 sb.Append(pages[i].ToString());
34 sb.Append("</div>");
35 }
36 }
37 this.contentBody = sb.ToString();
38 }
39
2 protected string contentIssuedate;
3 protected string currentPage;
4 protected string allPage;
5
6 protected void Page_Load(object sender, EventArgs e)
7 {
8 BindContent();//提取内容
9 }
10 private void BindContent()
11 {
12 this.contentIssuedate = DateTime.Now.ToString();
13 // 用简单的数组代替正则表达式来进行相应的内容分组
14 string[] pages = new string[5] { "第<br>一<br>页<br>的<br>内<br>容", "第<br>二<br>页<br>的<br>内<br>容", "第<br>三<br>页<br>的<br>内<br>容", "第<br>四<br>页<br>的<br>内<br>容", "第<br>五<br>页<br>的<br>内<br>容" };
15 this.allPage = pages.Length.ToString();
16 this.currentPage ="1";
17 StringBuilder sb = new StringBuilder();
18 //设置所有的内容 进行JS的操作 display:none隐藏内容----
19 sb.Append("<div id='currentPage' style='display: none;'>1</div>");
20 sb.Append("<div id='allPage' style='display: none;'>" + pages.Length + "</div>");
21 for (int i = 0; i < pages.Length; i++)
22 {
23 int temp = i + 1;
24 if (i == 0)
25 {
26 sb.Append("<div id='con_" + temp + "'>");
27 sb.Append(pages[i].ToString());
28 sb.Append("</div>");
29 }
30 else
31 {
32 sb.Append("<div id='con_" + temp + "' style='display: none;'>");
33 sb.Append(pages[i].ToString());
34 sb.Append("</div>");
35 }
36 }
37 this.contentBody = sb.ToString();
38 }
39
很简单的操作,仅供参考,运用也很简单的。asp.net fans群的兄弟,不好意思,没时间写这个,学习时间比较紧。XX,深更半夜写的,哈哈http://www.cnblogs.com/jasenkin/archive/2009/12/18/1626838.html.