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,深更半夜写的,哈哈http://www.cnblogs.com/jasenkin/archive/2009/12/18/1626838.html.

  • 相关阅读:
    卡特兰数
    Tree
    关于树上DP的转移方式与复杂度证明
    Tarjan进阶
    排队
    Perm 排列计数
    [bzoj1227]虔诚的墓主人
    [BZOJ1195]最短母串
    ValueError: Variable vgg_16/conv1/conv1_1/weights already exists, disallowed
    《链家网技术架构的演进之路》读后感
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/1809019.html
Copyright © 2011-2022 走看看