一次數(shù)據(jù)庫操作---JS實現(xiàn)內(nèi)容分頁，避免無謂的數(shù)據(jù)庫查詢往返操作，僅提供思維供大家參考，縮短大家的學習時間。（當然對于內(nèi)容過于龐大的數(shù)據(jù)，呵呵，對于一個內(nèi)容對象應該不至于很大）
?????? 內(nèi)容分頁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(); // 提取內(nèi)容
?9 ? ????}
10 ? ???? private ? void ?BindContent()
11 ? ????{
12 ? ???????? this .contentIssuedate? = ?DateTime.Now.ToString();
13 ? ???????? // ?用簡單的數(shù)組代替正則表達式來進行相應的內(nèi)容分組
14 ? ???????? string []?pages? = ? new ? string [ 5 ]?{? " 第<br>一<br>頁<br>的<br>內(nèi)<br>容 " ,? " 第<br>二<br>頁<br>的<br>內(nèi)<br>容 " ,? " 第<br>三<br>頁<br>的<br>內(nèi)<br>容 " ,? " 第<br>四<br>頁<br>的<br>內(nèi)<br>容 " ,? " 第<br>五<br>頁<br>的<br>內(nèi)<br>容 " ?};
15 ? ???????? this .allPage? = ?pages.Length.ToString();
16 ? ???????? this .currentPage? = " 1 " ;
17 ? ????????StringBuilder?sb? = ? new ?StringBuilder();
18 ? ???????? // 設置所有的內(nèi)容?進行JS的操作????display:none隱藏內(nèi)容----
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(); // 提取內(nèi)容
?9 ? ????}
10 ? ???? private ? void ?BindContent()
11 ? ????{
12 ? ???????? this .contentIssuedate? = ?DateTime.Now.ToString();
13 ? ???????? // ?用簡單的數(shù)組代替正則表達式來進行相應的內(nèi)容分組
14 ? ???????? string []?pages? = ? new ? string [ 5 ]?{? " 第<br>一<br>頁<br>的<br>內(nèi)<br>容 " ,? " 第<br>二<br>頁<br>的<br>內(nèi)<br>容 " ,? " 第<br>三<br>頁<br>的<br>內(nèi)<br>容 " ,? " 第<br>四<br>頁<br>的<br>內(nèi)<br>容 " ,? " 第<br>五<br>頁<br>的<br>內(nèi)<br>容 " ?};
15 ? ???????? this .allPage? = ?pages.Length.ToString();
16 ? ???????? this .currentPage? = " 1 " ;
17 ? ????????StringBuilder?sb? = ? new ?StringBuilder();
18 ? ???????? // 設置所有的內(nèi)容?進行JS的操作????display:none隱藏內(nèi)容----
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 .
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
