c#一次数据库查询，JS实现内容分页

       一次数据库操作---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>
83 

 

  相应的C# cs文件，先引用using System.Text;其中的stringbuilder相对于string性能更好！

    

CS代码
 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 

 

  很简单的操作，仅供参考，运用也很简单的。asp.net fans群的兄弟，不好意思，没时间写这个，学习时间比较紧。XX，深更半夜写的，哈哈.

posted @ 2009-12-18 08:59  jasen.kin  阅读(2298)  评论(2)  编辑  收藏  举报