今天 Dotjum 要介紹的小技巧呢,就是在 GridView 的 Pager 分頁的頁碼,可以自己透過 css 來控制,
想要的區分及目前頁的顏色,要做到這張圖的效果(點擊在第一頁時,為紅色)
那要怎麼做呢?很簡單,話不多說,請看說明
(以下程式碼是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 突顯目前選擇頁。
有趣嗎?下次在介紹有趣的給你知道。