自訂PagerStyle (分頁樣式)

用VS提供的「自動化格式...」雖然可以迅速完成美化
但是要自訂樣式時, 可用UI操作的屬性就略顯不足

簡單來說，就是要從這樣(眼痛到有剩)

Day Date No.  Time Comments 1 Jun/9/2016 1 10:30 test 2 Jun/10/2016 2 16:15 test2 3 Jun/11/2016 3

1 2

改變成成下方的樣式，其中應用了

• 改變Pager的底色, 文字置中
• 改變文字大小
• 改變連結顏色

要達到這樣的效果, 大致上分成兩種
◎一種是純後台coding(asp.net & C#)
方法可參考：Custom Paging with the ASP.NET Repeater Control
此方法不是本篇重點, 就暫不介紹

◎另一種是比較簡單的前後台混合型(asp.net & css)
參考自：How to change gridview paging numbers size?
主要是為Pager附加CSS, 然後就可以做想做的事

1. 指定要應用的css, 並設定背景顏色和文字置中
<PagerStyle CssClass="fvPagerStyle" BackColor="#889999" HorizontalAlign="Center" />

2. 利用CSS改變文字大小
 .fvPagerStyle span {
            font-size:18px;
            color:white;
        }

3. 利用CSS設定超連結顏色
.fvPagerStyle a {
            color:#CCEEff;
        }

這樣就可以快速地自訂Pager, 也不怕改錯

Day Date No. Time Comments 1 Jun/9/2016 1 10:30 test 2 Jun/10/2016 2 16:15 test2 3 Jun/11/2016 3

1 2