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