[ASP.NET]GridView DataGrid 分頁頁碼 Pager PagerStyle 加上CSS 讓分頁頁碼突顯出來

摘要:[ASP.NET]GridView DataGrid 分頁頁碼 Pager PagerStyle 加上CSS 讓分頁頁碼突顯出來

今天 Dotjum 要介紹的小技巧呢,就是在 GridView 的 Pager 分頁的頁碼,可以自己透過 css 來控制,
想要的區分及目前頁的顏色,要做到這張圖的效果(點擊在第一頁時,為紅色)
image
那要怎麼做呢?很簡單,話不多說,請看說明
(以下程式碼是Dotjum的前輩分享給Dotjum的)
Step 1.在 GridView 輸出到前端的時候你可以看到他的HTML的原始碼

<td colspan="6"><table border="0"><tr><td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvCourseList','Page$2')">2</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvCourseList','Page$3')">3</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvCourseList','Page$4')">4</a></td></tr></table></td>

 

Step 2.所以選中的頁是 <span> 其他就是一般的 ,所以加入以下的css
 

 

.PagerCss TD A:hover { WIDTH: 20px; COLOR: black } .PagerCss TD A:active { WIDTH: 20px; COLOR: black } .PagerCss TD A:link { WIDTH: 20px; COLOR: black } .PagerCss TD A:visited { WIDTH: 20px; COLOR: black } .PagerCss TD SPAN { FONT-WEIGHT: bold; FONT-SIZE: 15px; WIDTH: 20px; COLOR: red }

 

Step3.將 GridView PagerCss  加入

 

<PagerStyle CssClass="PagerCss"></PagerStyle>

 

就這樣,簡簡單單三個步驟就能夠將你的 GridView 分頁加上自己要設定的CSS 突顯目前選擇頁。
有趣嗎?下次在介紹有趣的給你知道。