zoukankan      html  css  js  c++  java
  • 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;  100%; height: 30px;"> 
    46                             <span>提供一种JS思维,帮助大家缩短学习的时间,仅供参考</span>
    47                             </div>
    48                             <!--  content body -->
    49                             <div>
    50                                 <div style="background:blue; 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;  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,深更半夜写的,哈哈.

  • 相关阅读:
    Codeforces 845E Fire in the City 线段树
    Codeforces 542D Superhero's Job dp (看题解)
    Codeforces 797F Mice and Holes dp
    Codeforces 408D Parcels dp (看题解)
    Codeforces 464D World of Darkraft
    Codeforces 215E Periodical Numbers 容斥原理
    Codeforces 285E Positions in Permutations dp + 容斥原理
    Codeforces 875E Delivery Club dp
    Codeforces 888F Connecting Vertices 区间dp (看题解)
    Codeforces 946F Fibonacci String Subsequences dp (看题解)
  • 原文地址:https://www.cnblogs.com/jasenkin/p/1626838.html
Copyright © 2011-2022 走看看